Everything posted by leode5a7
ScrollTrigger understading helpThat'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.
ScrollTrigger understading helpI’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.
Scrolltrigger pin helpThank you! This gets me on the right track
How to make this heat distortion effect
leode5a7 replied to jasonworks's topic in GSAPI 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
Scrolltrigger pin helpHi 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.