Leaderboard

Hi @Nelou and welcome to the GreenSock forums! You can use preventOverlaps in your ScrollTrigger configuration: for (let i = 0; i < sectionArray.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: sectionArray[i], toggleActions: "restart none reverse none", start: '125% top', end: '125% top', preventOverlaps: true, // <- HERE id: 'animate '+containerArray[i]+" & "+containerArray[i+1], markers: true, } }); } You can read more about it here: https://greensock.com/3-8#preventOverlapsAndFastScrollEnd Be sure to watch @Carl's great video, which explains in details how it works. On top of that, right now you have a very convoluted setup. Since every section has only one child element, why are you running two loops? This could be simplified quite a bit by running just one loop and selecting the child element of each parent section. Also I'd try to create just a single ScrollTrigger instance for each section and run the animation on that. As for the resize event issue, it seems that the order you're creating the ScrollTrigger instances is what's causing those problems. I couldn't tell you exactly why, but creating the parent containers ScrollTriggers after the other ones seems to resolve the issue. Is a bit odd since the parent element is being pinned but without pin spacing, so that shouldn't mess the calculations ScrollTrigger makes for the other instances, but apparently it does, so this seems to work: // Run child sections loop first for (let i = 0; i < sectionArray.length; i++) { } // Run parent sections loop after for (let i = 0; i < containerArray.length; i++) { } Hopefully this helps. Happy Tweening!

Hi @ThomasDeer I'm not completely sure what it is you want your animation to do, what I do recommend is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. If your animation is not doing what you expect, your ScrollTrigger will defenently not work. What I would do is first layout your elements with CSS, where you want them to start or end and then you'll only need a .to() or .from() animation. .fromTo() animations are great, but you'll rarely need them. So if you want the images to always move to the middle, I would then stack them all on top of each other with CSS and them move them .from() some position and when they need to move up .to() some position. I sometimes also make the mistake of trying to optimise my code before having something working, it is hard to optimise code before it is doing what you want. I would personally first write it out and then you'll see pattens emerge which you could replace with a loop or a stagger. Please try your hand at my pen below without the ScrollTrigger and post that with an explanation of something like: "my image is not moving up when I expect it to at line 19" https://codepen.io/mvaneijgen/pen/XWPxGwx?editors=0010

I'm kinda late to the party, but - yep I'd go with @Cassie's approach of a thin and thick "mask" element. Otherwise you'd need to break it into pieces like my calligraphy tutorial you mentioned in the original post. https://codepen.io/PointC/pen/xxZejqM/c80d6e828e061b0615a441228616fcbb Happy tweening.

Hi, Since this depends on opening a modal, just use the events that open/close the modal to restart/pause the timeline. This scenario actually makes things even simpler: https://codepen.io/GreenSock/pen/eYLQmwO Hopefully this helps. Happy Tweening!

Hi @alechance the solution @Rodrigo has provided is wha you need. I don't have time to refactor you're whole setup, but you need to create an animation on page load and set that to paused: true and then in your click handler .resume() (or .restart() if you want it to start over on each modal open close) the timeline and .pause() it again on close. Right now you have loops in event triggers with in there more loops with more in event triggers, is a logical nightmare to keep track of. What I would do is create one forEach loop for a button/modal combo and scope all your logic to that particular combo in the loop. Here is a working demo with a lot of CSS/JS removed/moved, to get something working, but to get this in a logical correct state it will need a lot of refactoring. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLxRWXy?editors=0010

Hey there Patrick! So I can't really speak in detail on why your demo in 3.11.0 is working. There was a regression related to from tweens which was *fixed* in 3.11.3 - so maybe this is just an edge case that was working but shouldn't have worked? It does look like a React integration related issue though, likely to do with strict mode - I popped it into codepen using 3.11.4 and without React it's working fine. https://codepen.io/GreenSock/pen/vYzVwYe?editors=1111 That being said - There are a few issues in your setup which I've adjusted here for you - The main one being - React 18's strict mode behaviour calls for proper cleanup of animations as all effects will be run twice. We added context to help with this some others - UseLayoutEffect is preferable to useEffect when doing DOM calculations as it runs after the DOM is finished loading Context also lets you scope selector text easily! You're using a fromTo tween on a timeline, but the 'from' section is empty, there's a scrub but no animation being scrubbed and there are no more tweens on the tl? Is there a reason for this? Seems like it would make more sense to just use ScrollTrigger.create() for a pin here. Maybe you've just simplified down an animation to demo? If so ignore me! https://codesandbox.io/s/gsap-pin-issue-forked-2ejglr?file=/src/App.js I hope this helps.

Hi @AlecV you're in the Club Greensock: SimplyGreen tier. The next tier up ShockinglyGreen has access to the same tools you have plus ScrollSmoother, MorphSVG, Inertia plugin, SplitText, MotionPathHelper and GSDevTools. See the table on the following page. https://greensock.com/club/ you can probably just upgrade your account if you want access to the other tools.

Fashionably late 💅🏻

Hi, In that case you have to import GSAP on your script tags. Here is a Nuxt2 & GSAP starter that you can follow to avoid that error. Just don't use this.$gsap on your script and it should be fine: https://stackblitz.com/edit/nuxt-starter-xvx9ux?file=README.md As for he mouse follow part of it, use quickTo(): https://greensock.com/docs/v3/GSAP/gsap.quickTo() Hopefully this helps. Happy Tweening!

Hi, I believe the issue could be on your CSS setup. In this one everything works OK and the CSS is super simple, no grid or anything like that, just images stacked on top of each other and let GSAP run some magic to give them different sizes and positions: https://codepen.io/GreenSock/pen/abaQdwe I used the same setup in a React app (I don't know if you'll be using React or another framework): https://stackblitz.com/edit/vitejs-vite-nuat5p?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!

Hello Rodrigo, It solved my many problems, thanks a lot ! I tried that in a previous version, but oddly enough, they were not synchronized the way I wanted. But if you tell me it's possible I'll give it an other shot ! Once again thank you so much for your reply. Have a fantastic day 😄

Hi @Vincent07 and welcome to the GreenSock forums! It seems to me that you're using the syntax for accessing some Nuxt/GSAP plugin. Are you 100% sure that you installed the plugin and added it to your Nuxt config file? Normally in Vue/Nuxt you have to import GSAP into your files, but if you want to avoid that you can follow the instructions @iotron shared in this thread: Finally if you keep having issues please fork this Nuxt3 starter template in order to show us the problems you're having: https://stackblitz.com/edit/nuxt-starter-khrgsj Hopefully this helps. Happy Tweening!

Thank you, I was able to get it working by using gsap.context() and revert()!

Hi, There are a few issues here. First the start and end points are kind of weird, if you check the example you'll see that the end marker is above the start marker, but it kind of still works. Second you're not using GSAP Context and doing proper cleanup in your effect hook, which is especially problematic using from instances. In React strict mode the effect hooks have a double call as explained here: https://greensock.com/docs/v3/GSAP/gsap.context() This seems to work as expected: https://stackblitz.com/edit/vitejs-vite-oqdyq4?file=src%2FApp.jsx&terminal=dev Hopefully this clears things up. Happy Tweening!

If youre using scrollsmoother, dont use `scrollY` or `scrollX`. Instead use `x` & `y`.

Hi @mvaneijgen, Thanks for your insight, The information you provided has managed to help me sort my issue. function pinQuotes() { let elementHeight = quoteHeight; quote_timeline.addLabel("One", 0); quote_timeline.to(".quote-article-1", { y: "-" + elementHeight }, "+=0.5"); quote_timeline.addLabel("Two", "<"); quote_timeline.to(".quote-article-2", { y: "-" + elementHeight }, "+=0.2"); quote_timeline.to(".quote-article-2", { y: "-" + (elementHeight * 2) }, "+=0.2"); quote_timeline.addLabel("Three", "<"); quote_timeline.to(".quote-article-3", { y: "-" + (elementHeight * 2) }, "+=0.2"); quote_timeline.to({}, { duration: '0.5' }); } For anyone interested, This is my Adjusted pinQuotes Function which was what I used to get this working as expected. Thanks again for your assistance. I'm looking forward to using gsap in the future and learning more about this powerful library.

Alright, I was just looking for a workaround using basic version of GSAP. Thank you for your quick support. Amazing community.

Oh ok I got you! yoyo:true is the property that's making it go backwards and forwards (like a yoyo) If you remove that and adjust the initial offset position it may be closer to what you're after? https://codepen.io/GreenSock/pen/KKxGEJy?editors=1010

It only appears to be centered in the end - it was not my intention to make it become centered - and I already gave you an explanation for the movement on the horizontal axis earlier. If you don't want your picture/s to move on the horizontal axis, switch the part that I added just for showcasing back to 0. That is btw generally more of a canvas related part and nothing GSAP really is responsible for, so it might be worth checking up on that. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#drawing_images

Rough Inspiration Pages in Terms of functionality: https://www.apple.com/de/iphone-13-pro/ https://www.drinkpoppi.com/products/raspberry-rose/ https://www.moooi.com/eu/beauty-blooms https://www.thinkwithgoogle.com/feature/ml-fairness-for-marketers/ Hi there! We're looking for a Developer for a Shopify Store with the following aspects:- Landingpage (page with GSAP animations showcasing different products) For this we would love to work with someone creative who is getting involve in the scrolling process so animations make sense- Shop (with 3-4 categories, but so far only 10 online Products)- Sign up Page E-Mail- Gearpage with affiliate links (overview of pictures that are linked to amazon; in best case sortable with filter)- Job page (Text only)- Imprint (Text only)WE ARE NOT LOOKING FOR A SOLE DESIGNERBy the end of the Project, the homepage should run smoothly on mobile, desktop, tablets and the purchase process should be working. (Sending out digital product after purchase)We do have a general mood board and example pages to instruct but would love for you to be collaborative, so we'll get the most satisfying outcome for both parties.Optional:Develop Brand Identity & LogoKindly message me with your most current work in Shopify Shops , and a landing page sample designed with GSAP.

Hi @GreenSock Thank You very much!!! The first option works well for my usecase. But thank you for the second option also got me an exposure for the timeline usecase also. Appreciate your prompt support!! ❤️

If you want the scrollTo() to allow the smoothing effect, you should set the smooth parameter to true: // bad smoother.scrollTo(to); // good smoother.scrollTo(to, true); But you also have logic problems in your code. You set up a tween with a ScrollTrigger that moves the circle whenever the page's scroll position changes (and it has a 1-second scrub delay), and you ALSO have a Draggable trying to control the same element. So when you drag, your onDrag updates the scroll position which in turn tells the tween to move the circle which you're already trying to drag (so they're fighting with each other). See what I mean? Your scrub is gradually trying to alter the y position of the circle which you're also trying to drag simultaneously. Your calculations were wrong in the onDrag too (see my fork below). Even if you disable the ScrollTrigger onPress of the Draggable, and then enable it onRelease, you'll still have some weirdness because your scrolling is smoothed, thus it takes 2 seconds to "catch up". If you drag to the circle to a new position and then release right away, you'll see the circle jump back a bit and then eventually land when you released - that's because you re-connected the ScrollTrigger at that point, so the circle is then reflecting the smoothed position. https://codepen.io/GreenSock/pen/poOxxmb?editors=1010 Good luck with the project. I hope that at least gives you a nudge in a helpful direction.

Actually, I think that's a reason to use Cassie's approach (unless I misunderstood your goal). The helper function just calculates the exact pixel value, but if you want it to truly remain based on percentage (so that it adjusts with the height of the element itself if that happens after the tween), the calculated pixel value isn't what you want. Did you try Cassie's approach with yPercent and y? That certainly seems like the correct route to go. A minimal demo will go a LONG way toward clarifying things and making sure we're all on the same page.

In my opinion - steer clear of Lottie as much as possible tbh, especially for nice simple things like this. Lottie doesn't 'tween' properties, it stores all the information about each frame in a JSON file and then bangs an entirely new SVG 'frame' into the DOM, 60 times per second (or however many frames you render out) It's ok for some things, but it can be very performance intensive, and if you hook lottie's up to scroll, unless they have a lot of frames you can see it flick from frame to frame. Not ideal. The canvas renderer is better if anyone does go that route, but more limited in terms of animation. *edited for context

Yeah, two is the way I reckon. A thick one covering the shapes and a thin one doing the line. Like this? Might need to go back into an editor and do a little tweaking of the 'mask' shape, it's a little off at the beginning. https://codepen.io/GreenSock/pen/YzOJerL

I don't have much time to dig into this right now but... Maybe you could split it apart into TWO drawSVG animations - one that's just for the thin line (so that the mask can be equally thin and not accidentally expose intersecting lines) and one that's for the chunkier shapes. Think of it like they're on separate layers, masked individually. -OR- maybe you'd have to chop the artwork apart into a few sections based on where the intersections occur (so that each individual section can have its own mask that doesn't affect other sections), and then just sequence them in a timeline. I defer to @PointC's geniusness on this type of stuff. I can't imagine it'll be a lot easier in After Effects, honestly, and I'm pretty sure Lottie is gonna be bigger and less performant. Just a guess though.

Seems like this would be a great use-case for Flip plugin! https://codepen.io/GreenSock/pen/rNZqpGE?editors=0110

As the Helper already mentioned, this forum isn't really for tutorial requests of any sort @NikzA - but in this case I remember Tom Miller crafting something quite similar together with Alex Trost on the Frontend Horse / TrostCodes Twitch-Stream. https://www.twitch.tv/trostcodes You can re-watch that episode over on Youtube - maybe consider giving them a thumbs up for their work or leaving a nice comment on the video. It's not infinite and doesn't have the exact same effect as the website you referenced (the logic for that is for you to implement then, heads up; it will likely not be the easiest thing to do) - on that website they are probably not even relying on native browser scrolling or native browser elements but rather listenening to relevant events like the wheel or touch in combination with WegGL rendering - but at the very least this should be a good starting point. Hope it will help, good luck! https://codepen.io/creativeocean/pen/gOvYEgq

No problemo, no need to apologize happens to the best of us Glad to hear that you find the problem 🙌 Happy Tweening!

You could mix up yPercent and y values. https://codepen.io/GreenSock/pen/GRXYWoW yPercent is a percentage of that elements height. 100 would be the entire height, then you can use y to offset that by 100px ✨ Hope this helps!

This is totally unrelated to GSAP/ScrollTrigger - it looks like iOS requires that you have the playsinline attribute on your <video>...which React strips out unless you define it as playsInline (capital "I"). Same for the autoplay attribute...but since iOS requires autoplay and you don't want it to actually play, you must listen for the loadeddata event and pause it and strip out the autoplay attribute (annoying!): https://codepen.io/GreenSock/pen/poOOxEj?editors=1010 Better?

You can define defaults in a timeline or globally if that's what you're asking ☺️

@chacrasoftware Thank you for posting a fix! This worked for me!

You can manually calculate the length, but this is much easier. https://codepen.io/osublake/pen/GjYpPr

Hi @HackGibson Welcome to the forum. Here's a basic toggle to play/reverse a timeline. https://codepen.io/PointC/pen/WqKyye Hopefully that helps. Happy tweening and welcome aboard.