JonQuayle

Thanks @mvaneijgen, that is much clearer now, now to get this to play nicely in React :).

Thanks all, I've taken the time to recreate this in a codepen as simply as I can. So, I've got the 'featured project' opacity animating in using scroll trigger fine, but I don't know where to start in animating children elements in when the parent container comes into view. I'm wanting the blue overlay to scale up to 0, revealing the image beneath, and fade the title and link element in from 0. I'm probably making this harder with the project being in React. https://codepen.io/JonQuayle/pen/ExEJaBK

Hi, I am trying to animate elements as the parent appears in the viewport. I have followed this article (https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/#6-how-to-use-scrolltrigger-with-react) to animate the parent as it appears in the viewport using ScrollTrigger, but I have an image and text elements as children to each of these parents which I also want to animate in - but not as the individual elements appear in the viewport, when the parent appears in the viewport. I'm assuming the best thing to do would be to play a timeline for each(?), but am struggling with where that timeline would sit and how to reference the separate elements in the timeline. I'm building this in React so I don't know if I am supposed to be calling the elements in a certain way? Whatever I have tried so far hasn't worked so I've pulled it back to the point of the above link. I'm also really struggling getting this into a Codepen as its React and is pulling data in from a headless CMS - it just isn't playing ball. So the code below is animating in the parents elements correctly, but how can I set the ScrollTrigger on these parents elements, but animate their children rather than the element that is being watched by ScrollTrigger? I'm sorry if this is a long post, I'm reaching the end of my understanding with this 😂 // Referencing the Featured Projects to reveal const revealRefs = useRef([]); // for each of the projects to reveal, add them to an array. // This will allow this array to be looped over and animate its children invididually revealRefs.current = []; const el = useRef(); const q = gsap.utils.selector(el); useLayoutEffect(() => { revealRefs.current.forEach((el, index) => { gsap.fromTo(el, { opacity: 0, }, { ease: "sine.easeOut", duration: 0.8, opacity: 1, scrollTrigger: { markers: true, trigger: el, start: "top 85%", } }); }); }, []); // Adds all found refs to the revealRefs array for animation const addToRefs = (el) => { // Check if the element exists. // If it does not include it in the revealRefs array if(el && !revealRefs.current.includes(el)){ revealRefs.current.push(el); } }; The actual markup is like this: {projects.results.map((document) => ( <div className="featured-project_wrapper" key={document.id} ref={addToRefs}> <PrismicLink className="featured-project_item" document={document} > <figure className="featured-project_image"> <div className="reveal-overlay" style={{backgroundColor: document.data.main_colour}}></div> <PrismicNextImage field={document.data.featuredImage} imgixParams={{ q: 80 }} layout="fill" /> </figure> <div className="featured-project_info"> <h2 className="heading"> <PrismicText field={document.data.projectTitle} /> </h2> <div className="underlined-text-link">View project</div> </div> </PrismicLink> </div> ))} Thanks

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