Leaderboard

yes, @mvaneijgen is correct. change your init so that resetStages() doesn't run const init = () => { setupEventListeners(); // resetStages(); initializeMobileView(); }; you'll the stroke looks fine. THE PROBLEM when the app first loads you do this // Initialize SVG paths gsap.set("#path-highlight", { drawSVG: positions[0] }); which sets the proper drawSVG settings while the curve is in its natural curved state. then you flatten the curve with your from tweens that adjust the attr settings. and then when your setActiveStage() function runs you apply drawSVG again when the curve is flattened. when you scroll the curve gets longer and stroke dash array settings make the stroke repeat. SOLUTION don't set drawSVG settings when the curve is flattened. ---- nice job on enhancing the project from the course!

Hey @mvaneijgen + @GreenSock, After testing again on a similar Macbook, I was able to find out that a minimal zoom in Safari was the cause of the weird behavior. Thanks a lot for your support ☺️ Next time I will test on a similar device first to rule this out.

Couldn't help my self. It is not perfect, but with minimal effort I could get this working. Now it is just a question of tweaking the values to be more inline with what you want. Personally it takes me around 10 version to get where I want to go, so just keep forking your work until you're happy. https://codepen.io/mvaneijgen/pen/OJKVGjV?editors=0010 It really helps drawing things out on pen and paper and also check the following post. There is no shame in writing out animation by hand, I prefer it that way! It really helps to understand what you want you're animation to do! Hope it helps and happy tweening!

First off (transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;) you should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. Second your background tween starts all the way to the left of the browser, so it takes awhile for them to catch up to the text, if you want to have this start sooner you have to modify your CSS to that it reflect what you want. Just to emphasise, there is no GSAP issue here at all everything here is all CSS/HTML related, GSAP is doing exactly what you tell it to do. Hope it helps and happy tweening! https://stackblitz.com/edit/react-kg9cku?file=src%2Fstyle.css,src%2FHoverLines.jsx

Good news, not a GSAP bug, and not an issue you'll see on your website. It's an issue specifically in chrome with pointer events within iframes Bad news, Chrome doesn't seem to know what's happening and it's affecting quite a lot of our demos and making it look like GSAP is broken. Here's the thread if you want to comment and t=ask them to fix it or add additional info. @mvaneijgen - if you can replicate it please comment, it's really intermittent and only replicable on some specific mouse/trackpad setups and OS versions. https://issues.chromium.org/issues/348520453?pli=1

@webpages.de good catch! The docs had a big update recently and we're still updating them to include all the necessary info. It seems like defaults has it's own section in the docs, but I agree it also should be in the vars table. https://gsap.com/docs/v3/GSAP/Timeline/#defaults Side note: I've spit your reply into its own topic, no need to bother all those people 4 years later.

Hi @jsquared welcome to the forum! There are a few special properties in GSAP, but as a good rule of thumb it is good to remember that GSAP is animating a CSS property, so if there is a CSS property called blur GSAP can animate it! Now you're in luck the CSS filter property has a blur() value https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur, which GSAP can animate with ease! Keep in mind that filter effects are really heavy on the browser, so it is best to use them with caution! And in your CSS you can set will-change: filter; on the element that will change its blur to help the browser preform better. The CSSRulePlugin has been deprecated in favour of animating CSS variables in stead, you can read all about it here https://gsap.com/docs/v3/Plugins/CSSRulePlugin/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWZQmme?editors=0010

Hi jasecore, You forgot to load the gsap library and the DrawSVG plugin. DrawSVG is for animating strokes, not fills, so I changed .cls-1 to have a stroke. Then target the actual path, not a group that the path is in. It's also possible do this without DrawSVG, using stroke-dasharray and stroke-dashoffset. I didn't finish it for you, but here's a fork of your pen that gets you a little closer: https://codepen.io/geedix/pen/LYKoere

@Phil Owen Issue is you are playing all animations when first scrolltrigger is triggered. Instead you need to loop through target areas and trigger animation for that specific area. https://codepen.io/SahilAFX/pen/PoMWeVJ?editors=0010

And yet your assistance was still very helpful! Mitchel's guess about CSS transitions was spot on. I put an event listener on "transitionrun" and sure enough they were firing off all over the place. I've hacked "transition: none" into the element style and now everything is smooth! Maybe I can find a more elegant way to do that at some point 😆 Thank you

Hello and thanks for getting back to me. For those who would face the issue, I ended up solving it by using the "pinnedContainer" property. Very intuitive actually, I should have digged a little but more before reaching out. Thanks again!

It's a fallback incase the user doesn't have JS, otherwise your just hiding the whole webpage from them.

Ha! Here is the solution! With a bit of trying and testing, this CSS helps with the problem! So now I have all 3 scenarions covered: External JS & CSS doesn't work on Designer, allowing me to edit. Custom CSS prevents .page-wrapper to be hidden when in Editor Mode And everything works as expected in Production! WIN WIN WIN! 😃 /* Hide page-wrapper initially */ .page-wrapper { opacity: 0; visibility: hidden; } /* Ensure the page-wrapper is visible in Webflow Editor */ .w-editor .page-wrapper, body.is-editor .page-wrapper { opacity: 1 !important; visibility: visible !important; }

Thanks, it's fixed

Hi @lebovsky welcome to the forum and thanks for being a club member 🎉 Animating the width and height of things is never the first choice, this because it will cause a browser repaint, which is bad for performance and indeed it pushes everything down which is never what you want. If you could transform your animation to use the transform: scale() this is highly recommended, because this will not cause browser repaints and will be much better for performance, the effect will be different because transforms don't effect other elements. That said, because your effect relies on all the elements being in sync with each other this calls for a timeline, eg that are where timelines are build for! In your example you were creating 10 ScrollTriggers and 10 timelines, which are now done with just one! Also personally when hooking timelines to ScrollTrigger I like to have the ScrollTrigger logic on the timeline, then it is clear in one glance what is doing what. Also check out https://gsap.com/resources/mistakes/ you almost never need a .fromTo(), so also here. For the effect to fully work you might need to increase the the total ScrollTrigger distance by the amount you increase a block, so end: "bottom+30vh center", you might have to calculate that using JS, so end: bottom+=${window.innerHeight * 0.3} center`, I'm not sure. I've also placed some comments in your JS to explain certain properties, be sure to read thought them. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaXzORP?editors=0010

@t1B0Y Here is tweaked version that might help you get closer to the effect you are trying to achieve. Check comments to see what I changed. I didn't reuse points in this demo but to reuse existing points, you can find closest point then iterate through the subsequent points using similar loop. https://codepen.io/SahilAFX/pen/qBeZQea

Hi, Indeed horizontal pin is not supported when using a regular vertical scrolling like you are doing in your demo. There are a few alternatives, on is create a single timeline and pause that timeline accordingly to pin some elements, as shown in these demos: https://codepen.io/GreenSock/pen/WNyJQjN https://codepen.io/GreenSock/pen/NWzgrQQ The other alternative I can think of is using the Container Animation feature in order to change the position of the elements you want to pin from absolute to fixed and move them to the left/right accordingly: https://gsap.com/blog/3-8/#containeranimation This is not the easiest thing to achieve I must warn you. Definitely doable with enough custom logic, but not simple though. But if you want to emulate that you have to either consider Container Animation, or a convoluted HTML/CSS layout or a combination of both. My first attempt at this would be Container Animation. Hopefully this helps Happy Tweening!

Scroll and look at this you need only to change the design and give 3d perspective to the element inside the slide https://codepen.io/Antonio-Nocella/pen/LYwNyBo

Start making separate animation, so first focus on nav https://codepen.io/Antonio-Nocella/pen/QWeyPmb

Due to your setup I made it hard for me to understand how everything worked. I've re factored your layout and set it up how I would build this, with just one ScrollTrigger and a timeline. This allows me to just put the images anywhere I want and have them play when ever I want (or not play). Of course I don't know exactly what you want, but I've installed GSDevTools so you can easily debug your animation. I've written the full animation out by hand, I like to work this way so that I really get a feel for what I want my animation to do and this allows me to optimize my code when I know everything is fully working. I've written a post all about this, check it out I’ve placed some comments in your JS to better explain things, please be sure to read through them! I heavily rely on the position parameter for this effect, check out the docs. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBebwjV?editors=0010

Thank you for your response! After some debugging, I found out it was actually a caching issue. It works with the line of code get_template_directory_uri().

Hi @just_nick welcome to the forum! First of be sure to check out this post from the docs, might give you some extra insight https://gsap.com/resources/mistakes/ The values you're using x: "-88vh", y: "-112%", I would change the first one to use function based values (https://gsap.com/docs/v3/GSAP/Tween/#function-based-values) these recalculate on ScrollTrigger.refresh() which happens for instance on browser resize, so x: () => -(window.innerHeight * 0.88) would be the same as you have now, but would be more dynamic. and for your y: "-112%" check out yPercent: -112, would do the same, but is written more clearly and in my opinion better. For the snapping, currently what you do is create some value and have the snapping snap to multiples of that value. Lets say you your calculation where 1/5 you would get 0.2, which means snap to increments of 20% this would be 0, 0.2, 0.4 ... 1. In stead of a single value in the snap property you can also use an array eg, snapTo: [0.1, 0.38, 0.83, 1], this would only snap to those values, which would be more appropriate in your case seeing that the elements are not of the same height. Note that you can also add labels to your timeline and have ScrollTrigger snapTo: "labels" this could save you a lot of calculations, check the snap docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap Also currently your scroll seems larger then your animation or you're moving something of screen and thus getting a white space underneath it. Personally I find that the best thing to do when working with ScrollTrigger is to remove it! 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. Below your demo without ScrollTrigger, this is what your animation is doing is this correct? Because that is also what ScrollTrigger will be doing, so starting with the correct animation is vital in this case. Hope it helps and happy tweening! https://codesandbox.io/p/sandbox/compassionate-joji-nrjlj4?from-embed=&workspaceId=bcaaa07d-32c6-463f-8f71-8f69ac714b73

I'm not sure what it is you're trying to do, but I have the feeling you're creating to many ScrollTriggers. I would say this could be created with one ScrollTrigger and at most two, one for each row. I tried giving your ScrollTrigger id's and markers to see what is going on, but that didn't make it clearer. Also named your tweens and add them to a array, you're making 16 ScrollTriggers is that correct? I just see 8 blocks, so to me that seems like your loop is looping to many times. I see this happen a lot of times on the forum, loops are great, but before you optimise your code I find it best to first make a 'dumb' version, just write out by hand what you want to happen then you have a working version you can optimise and that will be a lot easier than trying to fix where you are not even sure what need to happen. I wrote a post about it, it might help you. https://codepen.io/mvaneijgen/pen/LYwpMMM?editors=0010

As always with ScrollTrigger. The best thing to do when working with ScrollTrigger is to remove it! 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. Personally I always start with a timeline, there is always time to optimize later and a timeline is just so much more powerful then a single tween. So also here just create two tweens one tat animates from 0.1 a the other two, then a smart position parameter to have them play at the same time and you're done! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNXOJRg?editors=0010

I'm not sure what it is you want. But I would start with an animation and figure out what the value is that you want the item to move. Is it half the size of the element it self, is it half the window size? Than create the animation and hook that up to ScrollTrigger then it will move that specific amount. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzmyGwR?editors=1010

It would genuinely be a huge help if everyone who can see this issue would comment on the chrome ticket. It's super easy, just make an account and comment with your OS/Browser/details of how you can replicate the bug

This is the most robust solution creating a dashed line and having it animate by GSAP, check out the post by our own @PointC https://www.motiontricks.com/svg-dashed-line-animation/

I'm not a 100% sure what it is you're asking. But I've converted your ScrollTrigger logic to a timeline and add a second tween on that timeline, where at -80% of the previous tween (eg 20%) it animates the border-radius of the section to 100%. Adding it to the timeline it will on reverse do the opposite which is the easiest way to have everything control by ScrollTrigger. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-3oiazw?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter

This thread might prove useful also.

Hi @mimi0 welcome to the forum! Here you go! I've you're looking for more demos from the site check out the collection on codepen https://codepen.io/collection/ZMqxyL?cursor=eyJwYWdlIjoxfQ== https://codepen.io/GreenSock/pen/MWRPXMr

I think I'm actually beginning to understand it! Thanks for the direction my pen is now working as I want it https://codepen.io/thebobajob/pen/XWvJpRR

Hello mvaneijgen, hello rodrigo, Thank you very much for your feedback. Unfortunately, it took me a while to get round to trying this again. I have found a solution that works for me, which I was able to achieve with the help of mvaneijgen pen. I was just looking for a way to get a relative position within a container in order to build the path with this basis. Not getGlobalPosition() but in this case getBoundingClientRect(). I then used the existing containers and variable sizes to create the SVG with the corresponding viewBox specifications. The result is now exactly as I need it. I have created a new pen with the solution. Thanks again for your advice and help! Many tanks again! https://codepen.io/dunkelweb/pen/BaXaMpV

That seems logical to me. The function updates the scroll position, but if someone is actively holding the scrollbar it cant really update the position. So you as the developer have to now make a choice, which of the approaches suits you projects/target audience best? I do a lot of website testing and also ask others to test my websites, I've never come across someone who will grab the scrollbar to scroll a page. Most browsers also hide the scrollbar, until you're actively scrolling, so the percentage of vistors that will do this seems really small to me, so why waste precious development time to optimise something that almost no one will see? I would figure that using that time to create more accessible websites is a much better use of time, like disabling your animation all together when someone has sets their preference "prefers-reduced-motion: reduce" https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/#accessible-animations-with-prefers-reduced-motion I don't know of a solution for you. Personally I see a lot of people really liking the animation I build on websites and see them scroll back up just to see the animation again, so that is what I would do keep the default behaviour of the ScrollTrigger 🤷 Hope it helps and happy tweening!

I wouldn't necessarily call this a "bug", but the behavior is different in v3.x and that was somewhat intentional. The problem is that when you remove() an animation from the parent timeline, it doesn't live anywhere. There's no parent timeline to scrub its playhead (all animations need a parent timeline to scrub their playhead except the globalTimeline). So here's a pretty simple solution: https://codepen.io/GreenSock/pen/yLmLver?editors=1010 Basically, add it to the globalTimeline after you remove() it from its parent. Does that clear things up?

Everything in GSAP starts with an animation, even if you want things to happen on scroll. So the best thing to do when working with ScrollTrigger is to remove it! 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've converted your tweens to a timeline, so you can have multiple things happen at the same time and have it all contain in one animation. I've used the position parameter to have second tween start at the same time as the first one. Lets focus on the animation at first and tackle scrolling things later It seems like it is doing that. It would be best if you could use dynamic values which are for instance relative to the current screen size, but if you cant do that you can use gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ to have your tweens changes on different screen sizes Also you're using React please read this article how to useGSAP() in React! Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-ekca7j?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter

Storyline has little or no awareness of the GSAP code even if GSAP is used internally to do their own animations. Do share a Storyline file on the Elearning Heroes forum and i will check when time permits. Kind regards, Math

mvaneijgen that was exactly what i needed. thank you

Hi, Polygons are not viable to work with MorphSVG, you need to convert those to a path either in your SVG editor or using the convertToPath() method: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/static.convertToPath Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNXBxPa Hopefully this helps Happy Tweening!

Hi @zhizhi welcome, im not a webflow developer but you can start from this demo to achieve what you want. Then i dont know how to implement it on webflow https://codepen.io/Antonio-Nocella/pen/NWQKqMK

That's awesome mvaneijgen, a simple yet really clever solution and easy for me to manage in the rest of the code. A big thumbs up for the awesome gsap team. EDIT: Marked mvaneijgen post as the solution because it's the more complete one, but Rodrigo post was of course the solution to the initial problem of the topic. Thanks a lot!

To me that seems like the easiest thing. Just add the tween on the SVG to move it up. I had to restructure your HTML/CSS a bit because of the margin-top on the SVG. The amount you draw your line seems to pretty much line up with how much you need to move the SVG, probably logical because you draw the SVG from 0 to 100% and the whole SVG also needs to move from 0 to 100%. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRbVmdL?editors=0010

Hi @Hera and welcome to the GSAP Forums! Unfortunately this is more trial and error more than anything else. My recommendation would be to avoid using videos on small devices in order to have better performance and use just some images from the video instead. You can still create a fun and engaging experience for phone users without creating a performance issue. Keep in mind that small devices have less horse power hardware-wise, so you can't demand too much from them. Happy Tweening!

I've actually been doing some research in this recently as we've done a bunch of these types of projects recently, and I've come to the conclusion it depends on the lenght and resolution of the video. At some point, there's a bit of a tipping scale and android starts falling over, even on high end devices, where iOS keeps playing no matter if its an old device or new. What you could try is adjust the CRF value. The command above mentioned 23. Now your milage may vary on this as I say depending on video lenght and resolution, but you can try values between 17 and 28, with lower values giving better quality, but also affects the fielsize. Higher values gives you worse quality, but also affect the filesize. Try and find a value that works for your specific video. Values between 17 and 28 are sane values. Any lower or higher and you wont notice a difference in quality much, but the filesize will be huge difference. I would almsot suggest to stay between 20 and 26 actually... If on the othr hand, you only have a handfull of frames, then maybe image sequence will serve you better

Hi @sachind3 welcome to the forum! You're making one of the most comment ScrollTrigger mistakes, nesting ScrollTriggers https://gsap.com/resources/st-mistakes/. ScrollTrigger can only be on the whole timeline or on single GSAP tweens (that are not part of the timeline) you can't nest them. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ animating property's likes top, left, bottom and right are bad for performance and are better handles by x and y. https://codepen.io/mvaneijgen/pen/jOjjQVa?editors=0010 The best cause of action would be to just use one timeline with one ScrollTrigger and have the whole animation you want to happen on that one timeline controlled by that one ScrollTrigger. You could also look in to the Flip plugin and do something like below. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/JjVPyxd

Hi @mvaneijgen, Thank you ur advise. It is really help. I solved the problem and updated in codepen. Cheers,

I know its a looong way into the future on this, but I had a similar issue with items not positioning correctly on Safari. After some local debugging (as well as a good amount of head-scratching), I realized I had only set the height of the SVG in the CSS. Once I added the width of the element manually into its CSS styles, the offset went away. Hope this helps - cheers!

You can start from here: https://codepen.io/Antonio-Nocella/pen/QWXRXWq

@mvaneijgen Thank you so much for the helpful explanation! Using the main element as the pin container and adjusting the pinSpacing exactly solved my issue. I appreciate you taking the time to share that solution it's working perfectly now! Happy tweening to you too! 🤗

@geedix Just an update...I got it working how I'd like.

This does seem to be an often-reported issue wherever Next.js and ScrollTrigger are used together. If you know your project setup supports ES modules but ScrollTrigger is still causing Next to report the "SyntaxError: Cannot use import statement outside a module" error, try adding this to your next.config.js : module.exports = { transpilePackages: ['gsap'], /* Your Next.js config */ };