amit95 Posted January 30, 2022 Share Posted January 30, 2022 I have an svg which forms the basis of my horizontal scroller. Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg. Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way? Note: view pen in full view See the Pen OJOyeod?editors=1010 by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 30, 2022 Share Posted January 30, 2022 Hey there @amit95 The technique you're trying only works when vertical scrolling. See the Pen rNYOXKJ?editors=1010 by GreenSock (@GreenSock) on CodePen You're looking for containerAnimation. Give this a look and let me know if you have any questions. Good luck! See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
amit95 Posted January 30, 2022 Author Share Posted January 30, 2022 Hi @Cassie, I'll look into that demo above For arguments sake, it my approach definitely not possible for horizontal scrolling? I.e, see this demo here: See the Pen jOWvgjV by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 30, 2022 Share Posted January 30, 2022 The solution's in my post - containerAnimation Quote Horizontal "containerAnimation" With containerAnimation you can trigger animations when certain elements inside that container enter the viewport horizontally! It's like a ScrollTrigger inside of a ScrollTrigger. 🤯 Link to comment Share on other sites More sharing options...
Cassie Posted January 30, 2022 Share Posted January 30, 2022 Ah! I see how that demo works now - apologies. I was jumping to conclusions. Either way containerAnimation is gonna be mega helpful here! Link to comment Share on other sites More sharing options...
amit95 Posted January 31, 2022 Author Share Posted January 31, 2022 No worries Was just curious to see how that demo works without containerAnimation but, it also seems like an older demo (before containerAnimation was about). Nevertheless, I've been experimenting with it and I'm encountering issues. From the containerAnimation demo you've linked above, the bare minimum code required to get .box-1 to animate on scroll is : let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: ".container", pin: true, scrub: 0.1, //snap: directionalSnap(1 / (sections.length - 1)), end: "+=3000" } }); gsap.set(".box-1", {y: 100}); gsap.to(".box-1", { y: -130, duration: 2, ease: "elastic", scrollTrigger: { trigger: ".box-1", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none reset", id: "1", } }); Which I have mimicked as best as possible, just to get something animating on scroll. In my original demo, I was using timelines to get content to fade out on scroll and for it to then start the horizontal scroller (you can see this in action in my original question). Now in my latest demo below, as I've adapted the code to accomodate containerAnimation , I've had to remove the timeline, the horizontal scroller doesn't work as it did in the original and the .animate elements are in no way working as they should in the demo. Any hints to point me in the right direction? Apologies in advance if I've asked something super stupid, only started learning GSAP about two weeks ago, but making progress slowly slowly 😬 Latest: See the Pen LYOGYZx by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
amit95 Posted January 31, 2022 Author Share Posted January 31, 2022 I realized that part of my issue in the above demo was that I was applying .animate to the path element, which already had an inline transform property set. I resolved this by grouping the path in a g tag and applying the .animate class on that instead (so the transforms do not conflict). V3 can be seen below, still working on a solution, but in case it helps further debugging: See the Pen mdqVRgG?editors=1010 by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 31, 2022 Share Posted January 31, 2022 Hey Amit - a helpful tip is to really focus on *why* solutions from demos are working rather than just copying the code. In your pen you have this tween - this is animating the container successfully along the x axis. It's using container.scrollWidth and client width to find out the amount the container needs to be animated horizontally. But this isn't triggered by scroll, it's playing on page load. gsap.to(container, { x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", }) Then you also have this tween - this is trying to animate the same container along the x axis. But this is copied from a pen which was animating multiple containers of 100% width, it uses container.length, which would usually return the number of containers in that section - but in your case you only have one container, so if you log this out to the console you get NaN let scrollTween = gsap.to(container, { xPercent: -100 * (container.length - 1), ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: true, invalidateOnRefresh: true, refreshPriority: 1, end: '+=4000px', markers: true, } }); Copying demos just causes confusion unless you really look at why the solution works 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now