Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      92

    • Content Count

      6,616


  2. akapowl

    akapowl

    Moderators


    • Points

      62

    • Content Count

      556


  3. mikel

    mikel

    Moderators


    • Points

      56

    • Content Count

      1,730


  4. GreenSock

    GreenSock

    Administrators


    • Points

      42

    • Content Count

      15,693



Popular Content

Showing content with the highest reputation since 01/13/2021 in all areas

  1. Hey @Nysh, This could be an alternative https://codepen.io/mikeK/pen/WNGmQvG Happy tweening ... Mikel
    5 points
  2. Hi AdulTSU, This is an interesting challenge and not too tricky with GSAP, but it does require knowing some of the finer nuances of the API. Please see this video on placing repeat in the stagger object vs placing it on a timeline or tween I was able to get what you want pretty close I think with this approach https://codepen.io/snorkltv/pen/BaLMJYP?editors=0010 The blog post below contains a lesson from my course GSAP3 Beyond the Basics which shows how to get rid of any pause between repeats https://www.snorkl.t
    5 points
  3. In case it's helpful to anyone else, I put together a demo that has directional snapping, variable width sections, and nav links: https://codepen.io/GreenSock/pen/xxEQNBB?editors=0010 🎉
    5 points
  4. this demo should help https://codepen.io/snorkltv/pen/JjowpLO
    4 points
  5. hmmm... seems okay to me. Maybe I didn't save when I reposted it. Should be alright now. PS I made a slight adjustment to your update progress function. I seem to remember that GSAP 3 deprecated negative progress so I'm keeping it between 0—1 in the fork.
    4 points
  6. Your pen is still loading Draggable 1.20. You'll need to use version 3 and use the inertia plugin instead of ThrowProps. https://unpkg.com/gsap@3/dist/Draggable.min.js https://codepen.io/PointC/pen/5085a9936999d3a510ec69da5f2d5a0d Happy tweening.
    4 points
  7. Hey @pjtf93 Working quick on codesandbox in that environment you use really was a pain for me, so I decided to show you an example in a forked codepen instead. The key to that demo is understanding how durations and thus also the position-parameter work on ScrollTriggers with scrub applied: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub What I did here, was 1) Add those <p> paragraphs (instead of your h1s) to the HTML-Markup inside of each .panel-text 2) center things up via CSS inside each .panel-text b
    4 points
  8. This has nothing to do with ScrollTrigger. You're positioning your inner div 500px from the top of the container. So if the viewport height is not at least 500px + height of the content, it will not fit in its container since the container has a height of 100vh. ScrollTrigger does not change elements heights when you pin it. It just keeps it in the same position.
    4 points
  9. Hey @callmegoon Actually the tween seems to work quite right, if I understood correctly, what it is you want to achieve. The problem actually just seems to be the start you are setting on those ScrollTriggers. Since your start is set to 'bottom bottom' and the trigger is way past that start point on load already, I think on first scroll the animation it will just jump right to the place/progress where it is supposed to be. If you want to start it immediately on scroll (and not jump) you could/should make the start dependent on the .offsetTop of your .tr
    4 points
  10. Sorry for the misunderstanding: What I was referring to was the part of killing off the old ScrollTriggers before/when transitioning and having to create them from scratch when the content of the new page has loaded. Otherwise ScrollTrigger might not have the correct dimensions to work with. "You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the thr
    4 points
  11. Hi @Samsky It is hard to understand what your code needs to do, because when disabling all javascript nothing is visible. What I would recommend is first styling everything with just CSS and placing it where in needs to end up and when that is done adding in the Javascript, right now everything is `width: 0%` and absolutely hidden which makes the CSS fight with GSAP and this doesn't have to be the case. Also you are using a really old version of GSAP (version 2) which is much harder than the new version 3. I would also suggest taking a look at some tutorials on youtube that are of
    4 points
  12. Yeah, the performance bottleneck is almost ALWAYS graphics rendering which has absolutely nothing to do with GSAP. And it looks like you're using filters (like blur) which KILL performance because the browser has a very hard time rendering those. So my guess is that less than 1% of the CPU load is GSAP and the rest is graphics rendering. That's why it won't matter if you switch to CSS to do the animation either - the browser still has to render the same stuff no matter which technology is interpolating the values. For the record, I've had literally thousands of elements animating
    4 points
  13. Hey @Ashish Verma, Speed is the result of duration and ease. https://codepen.io/mikeK/pen/gOwBQxo Happy tweening ... Mikel
    4 points
  14. It just needed a few more GSAP 3 updates. I thought you were going to do those. But here ya go. https://codepen.io/PointC/pen/5085a9936999d3a510ec69da5f2d5a0d Happy tweening.
    3 points
  15. Hey @ncti I'm guessing that this is what you mean by 'moving' (see pens in full pageview - it doesn't really show in the previews in here) https://codepen.io/akapowl/pen/d68c2513215e13e70d4b647cc89cf0b5 If you want not only the #pricing to stay fixed, but everything else too, you should apply the pin to an element that contains all of what you want to stay still. I added a .content-wrap here that surrounds all your content there, and pin that one instead. https://codepen.io/akapowl/pen/a4900831167d41f67171a460b7767dba
    3 points
  16. Browsers handle rendering in different methods. Some browsers perform better at some tasks than other browsers. There's nothing that you can do to fix that. You could try working around it by breaking your path up into multiple smaller paths with a tween for each and then piecing them together via your timeline. Apply ease: "none" to your tween. It's worth trying. To be clear the limitation isn't in GSAP at all, it's simply rendering/memory limitation of the browser.
    3 points
  17. @sinobra Welcome to the forums. Sure, using the AttrPlugin baked into GSAP's core, that is pretty much doable. Core plugins are similar to plugins for GSAP in their structure but are included in GSAP's core and don't have to be loaded using gsap.registerPlugin(). You can think of them as just a part of GSAP. ...just to say so you wouldn't even have to load anything else but e.g. the gsap.min.js for using it. https://codepen.io/akapowl/pen/85ce08b334c1c324bb15c092277f2e8a
    3 points
  18. It seems that the correct solution is really using setTimeout or gsap delay call because of call order inside React hooks. I found a good article about hooks which says that "useEffect is called in a bottom-up fashion, so the effects resolve first in the children, and then in the parent." Asynced setTimeout called after all calls executed in stack that's why this solution is fine. We simply change order of effects execution and effect with scrollTrigger inside child component executes after initializing of scrollerProxy in parent - that's our goal! Thank again Zach. I l
    3 points
  19. You put the onStart in the fromVars but it (and all properties that are not of your object) should be in the toVars. Moving it fixes your issue: https://codepen.io/GreenSock/pen/KKgJQLW?editors=0010
    3 points
  20. Hey @Paddyaa5 - welcome to the forums. I wrote up quite a lenghty and detailed explanation on the trickiness of this in this thread here You could apply a similar concept for the 'offset' to your pen. Luckily enough, applied to your base-example it looks much cleaner than in the examples of the thread I linked to. https://codepen.io/akapowl/pen/cc86810dacb287478f4cace69ac7dc8d Hope this helps. Cheers, Paul
    3 points
  21. Hey @yasserzakaria1993, Your first task (calculating the random start point) is a little more complicated. For the second, you could create individual spirals. Maybe for the option also. https://codepen.io/mikeK/pen/yLaZaNZ Happy rotating ... Mikel
    3 points
  22. Sounds like you're looking for the start/end properties of the MotionPath plugin. https://greensock.com/docs/v3/Plugins/MotionPathPlugin start Number - The position along the path at which to start, where 0 is the beginning and 1 is the end and 0.5 is the middle. It can be any positive or negative decimal number. For example, 0.3 would start the element at the 30% point along the curve. Default is 0. end Number - The position along the path at which to end, where 0 is the beginning, 1 is the end, and 0.5 is in the middle. It c
    3 points
  23. Hey @yasserzakaria1993 With that second part of the animation you mean something like this? https://codepen.io/danwilson/pen/ZGmeRO I think that should be achievable with GSAP's MotionPathPlugin I myself am not very experienced with it, but there are quite a few demos, that should get you on the right track. If you run into any more specific questions along the way, let us know Hope this helps for now. Cheers, Paul
    3 points
  24. Hey @kabe - welcome to the forums. I tinkered with your example a bit, trying to set the zIndex for the target of the tween inside of GSAP's callbacks. When setting those callbacks to the stagger-object it seems to work. On start the zIndex will be set to 999 and on complete it will be set to 1 in this example, resulting in the animated element always being topmost. tl.to('.page', { rotationY: 180, stagger: { each: 2.0, onStart: function() { gsap.set(this.targets(), { zIndex: 999 }) }, onComplete: function() { gsap.set(thi
    3 points
  25. @Ilja I was digging through this myself this weekend, and stumbled upon this in the v3 docs For example, if the threshold is 500 and the adjustedLag is 33 (those are the defaults) [...] [...] This feature is already activated by default, using a threshold of 500ms and a adjustedLag of 33ms https://greensock.com/docs/v3/GSAP/gsap.ticker#lagSmoothing
    3 points
  26. Hey @Ilja, Have you seen this thread "That's pretty unusual, but I suppose you could do that logic your own separately. Like you'd have to use Date.now() and when the tab becomes unhidden, do some comparisons to see how much time elapsed and set the progress() on your animation accordingly." And you should also migrate to the new GSAP 3 syntax. Happy tweening ... Mikel
    3 points
  27. Hey @Lichay, Please study the best guidelines to become a ScrollTrigger expert To work around this either use set immediateRender: false (like this demo shows) or use .fromTo()s for the later tweens (like this demo shows) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead (like this demo shows). https://codepen.io/mikeK/pen/RwGEyMy?editors=1010 Happy tweening ... Mikel
    3 points
  28. GSAP normally keeps the same transformOrigin for a tween because some browsers can give some unexpected results if you animate it. But you can set it yourself using an onUpdate if you need to: https://codepen.io/GreenSock/pen/wvzRzwx?editors=0010
    3 points
  29. Hey aok. You should kill off the tween if you don't want it to keep running: https://codepen.io/GreenSock/pen/WNGLwKR?editors=0010
    3 points
  30. Found the issue: You misspelled src as scr I should have caught that in the image you shared.
    3 points
  31. Yeah, I see the problem of the elements being cut off now - wasn't thinking about that before. I'm guessing the scroll-bar appearing is just bound to happen because at some point, the height of the container will simply just exceed the height of the window and besides setting the overflow to hidden, there is nothing I could think of, that would prevent your issues due to that. This is not a GSAP issue though (you will see, when you uncomment all your JS that this still is the case) - It is just how it is bound to work, I guess. I tinkered around with it quit
    3 points
  32. Hey @pjtf93 How to exactly do that depends on how exactly you want the text to behave. In the example you provided, the text scrolls freely, but judging from your description, I would guess you'd rather want it to be animated (and thus it probably needs a different setup). This thread here also has an example of mine where the text is being animated in instead https://codepen.io/akapowl/pen/256175b2dab5ddca7073dbc0e64e606d I have a slight feeling, this might suite your idea a bit better - but maybe I am wrong. For the part of
    3 points
  33. Hey @Samsky, You need a concrete width, animate the height and not the width and ideally with a .from tween // css .nav { position: absolute; width: 100%; height: 100%; ... } // js t1.from(".nav", 1.5, { height:'0%', ease: Expo.easeInOut, y: '0%', // ease: Back.easeOut }); Happy tweening ... Mikel
    3 points
  34. I wansn't aware of that myself, but it looks like it should be possible https://codepen.io/akapowl/pen/JjRmVNO
    3 points
  35. That again shows that it's a rendering issue - your 5K monitor has a lot of pixels to update. Again, it shows it has nothing to do with GSAP It seems to work fine on my PC. Simply sequence the tweens in a timeline with an ease of none and it should work great
    2 points
  36. Hey @mattdown, "It seems to judder a bit ...": With the two scroll triggers for the same object, you trigger a classic conflict.
    2 points
  37. Hey @darkgr33n Have you ever seen @Carl's auto open/close demo? https://codepen.io/snorkltv/pen/YzGpXWO That's using clicks, but you could adapt it to hovers. He even has a free lesson about it on his Creative Coding Club site. (scroll way down) https://www.creativecodingclub.com/bundles/creative-coding-club I hope it helps. Happy tweening.
    2 points
  38. Hey @JamesGrubb, ... an alternative suggestion. https://codepen.io/mikeK/pen/oNzmqeK Happy tweening ... Mikel
    2 points
  39. Hey DMIND. Thanks for the clear demo. After looking at your demo I had a guess that the child ScrollTrigger was being created before the scrollerProxy. Adding a delay proved that that guess is correct (or at least it works around whatever issue it's having). I am not very familiar with React, but perhaps there's a more React way of making sure that the necessary JS runs in the correct order?
    2 points
  40. Hey @ncti, Hmmm - this forum is not a 'request concert'. Please focus on understanding questions about GSAP. https://codepen.io/mikeK/pen/yLaZvoa Happy tweening ... Mikel
    2 points
  41. Maybe you could wrap it in a container <div>, so you split stuff inside that but the wrapper (outside that container) is flex. Or you could use techniques listed at https://css-tricks.com/centering-css-complete-guide/ Happy tweening!
    2 points
  42. Hey @Amir-Ali-Basic, Welcome to the GreenSock Forum. A reduced case with neutral content is completely sufficient. For example like this https://codepen.io/mikeK/pen/oNLNVJE?editors=1010 Happy tweening ... Mikel
    2 points
  43. Hey @mimoid-prog, Here is a slightly different setup and it works. https://codepen.io/mikeK/pen/abmPjxz Happy tweening ... Mikel
    2 points
  44. Like Zach said, it's totally unrelated to GSAP. It looks like Firefox is trying to "optimize" things by doing pixel snapping when the element has no rotation/skew. If you apply even the smallest amount of rotation, it seems to resolve things because it forces Firefox's rendering algorithms not to pixel-snap. So maybe try setting a rotation of 0.1 to things. Does that help?
    2 points
  45. Are you saying you think ScrollTrigger should be setting cookies or using LocalStorage, recording URLs and trying to find all that data for every page that has ScrollTrigger loaded? I definitely think that's outside the scope. Please keep in mind that on a full reload of a page, the scroll position can't be past where there's actual content. If, for example, your page is only 500px tall natively, but then you create a ScrollTrigger (after the page loads of course) that adds a bunch of pinSpacing so now it's 8000px tall, it can't magically know that the user had it scrolled to 6000
    2 points
  46. That's a bit out of scope for what we normally provide for free in these forums, but... There are a lot of ways to create that sort of thing. I recommend slowing down the video so that you can see each frame of the animation so see the details of it. You could create it using: A video Sprite(s) Canvas I'd probably try using sprites to begin with.
    2 points
  47. Hey @ncti, Start your adventure step by step. https://codepen.io/mikeK/pen/WNGLrxm?editors=1010 Happy tweening ... Mikel
    2 points
  48. Hey @kevchcm, Alternatively, you can use visibility: hidden for the modal. And give the modal content enough height and set the start in 'reachable distance' (e.g. start: 'top 200px'). https://codepen.io/mikeK/pen/rNMoOaq?editors=0110 Happy scrolling ... Mikel
    2 points
  49. Hey @SPR1NG9 - welcome to the forums. Providing a minimal demo always helps better understand what your issue is or could be. It can always stem from several sources such as the HTML-markup or CSS, so solely looking at your code can only force guesses on what might be the issue. Judging from the JS you posted, I noticed that you have two ScrollTriggers there trying to pin the same element at the same time - that alone could be a cause of problems. Also quite recently there have been some questions from users using locomotive-scroll's data-attributes and having prob
    2 points
  50. Hey CADS - Team and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership! This has been covered in this thread (make sure to go through the whole thing):
    2 points
×