JonQuayle

I see where I was going wrong, thanks @Cassie. That is making sense to me now .

Hey, I'm trying to animate multiple text elements on a page using ScrollTrigger and the SplitType library (https://github.com/lukePeavey/SplitType). I have got it work when animating the full text block itself (so I know the scroll trigger part is working), but I want to animate and stagger in the individual characters in a fluid motion - I have this working for the hero sections of the website on page load, but am stuck when looping through all the text elements on a page and targeting the text characters within the forEach() loop. The initial load works, but every element after that either isn't appearing at all, or is appearing but in the final animated state. I've tried assigning variables to the element.chars that is specified in the SplitType library to insert into the gsap.from tween but still not luck. I feel I am close but missing that last 10%... any ideas where I am going wrong? Simple codpen here - https://codepen.io/JonQuayle/pen/abEMKXX Thanks

Perfect @akapowl! I was so close, thanks very much!

I've just come across this post while searching for a way to replicate the behaviour of Midnight JS (https://aerolab.github.io/midnight.js/) using ScrollTrigger. Is there a way to apply a class to the header of the above example when having scrolled to/over certain sections, much like Midnight js does? The closest I have got is here - https://codepen.io/JonQuayle/pen/MWbXOLZ but as you see, even though the class should be applied when over the orange section, the class is getting removed. Can anyone enlighten me to how I can achieve this? Or even if it is possible. Thanks

@PointC Ahh I see, thanks very much! Jon

Hi @PointC, thanks for your solution. I can't get it to work for me though, even replacing the variable names and adding my own tween attributes in and they are still all playing when one is hovered over. What am I getting wrong here? https://codepen.io/JonQuayle/pen/vwGRpm?editors=1010 Thanks Jon

Sorry to resurface this @Shaun Gorneau, how would I go about altering this code to play the animation on just one instance of this? I have a series of these links and when hovering over one, the animation plays on all of them...? Thanks Jon

Hey @Shaun Gorneau, Thanks so much, you are a legend! It is always those small details I miss - still a novice at this. Thanks again Jon

Hi everyone, I am really struggling to get anywhere with playing and reversing a timeline when hovering over the element. I have tried all manner of options but nothing seems to work. I know the animation plays on page load as you can see in my attached codepen (https://codepen.io/JonQuayle/pen/KLzZyp), but I just cannot get it to work on hover. To give some insight into what I am trying to do: I have the image (as a link) which has a semi-transparent overlay over the top and a div with a background cover (which is the same colour of the page background). On hover, I would like the div to move over from the left and cover a percentage of the image and remove the dark overlay from over the image = revealing the image underneath. The idea is to then have text sitting to the left of the image so then on hover, a portion of the image is revealed to the right of the text. I hope that makes some sense. Any help with getting the animation to play on hover and back on mouse exit would be great. Many thanks Jon

Hi @mikel, @Carl These are great links to look into and learn from, thanks very much!

Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon