leode5a7

That's soo powerful man! ? I had to look up that relationship to ScrollTrigger and duration which I totally missed at the bottom of the docs. Thank you so much, specially the tips on how to clean up my code...I got a lot right here, will play with this for a while.

I’m still a bit mystified by ScrollTrigger and trying to harness it’s powers but failing to understand some key concepts…what I’m trying to do must have been done before but I just couldn’t find an example in my search. I’m fully aware that I’m misunderstanding some basic stuff of Scrolltrigger so apologies in advance if the demo looks stupid but it's just one thing I could come up with and I've been stuck with this for a few days now. What I’m currently trying to do is sequence a few individual animations for elements within container, so that each element’s animation start and end can be scrubbed sequencially within the scrolled duration of the container element. The animations can be anything but I want each duration to start and end within a designation division of the progress of the main container. For this I’ve pinned a container and attached a progressMarker element that I hope to use a scroll trigger for the elements to animate, so that when the progress marker is 10% from the top of the viewport I can animate an element from start to end from 10-50% then 50%-80% and so on. It is not working as I see the markers from the progress element are actually going the wrong way.

Thank you! This gets me on the right track

I don't think it would make sense to use GSAP for this, this is pixel manipulation using the Canvas API. You can read the source code here, search for a function object named "Haze": https://tympanus.net/Tutorials/HeatDistortionEffect/js/flight.js

Hi everyone! I've just started out using ScrollTrigger and just trying to wrap my head around this one animation. I would greatly appreciate any help. So I have a main pinned element that scrubs through and animation in a timeline, after the animation ends I'd like the main intro element to remained pinned and the rest of the content to scroll on top. To this effect I've positioned the initial element as fixed. However, as you can see in the codepen demo, at the end of the timeline animation the first element abruptly translates down. Though it seems to be getting the translateY value from the "end" property, I don't completely understand why it doesn't just keep the value it had and if there's something in the animation that's having this effect.