Leaderboard

Thanks for the demo. transformOrigin only applies to transforms like x, y, rotation, skew, scale. width and height are not transforms for what you want to do I suggest using scaleX. I wasn't sure where you want the line to start and end, but hopefully this demo points you in the right direction. feel free to play with the values. https://codepen.io/snorkltv/pen/WNKVYGV?editors=1010

Here's your problem: // BAD gsap.timeline(menuText, {paused: true}); // GOOD gsap.timeline({paused: true}); Browsers won't apply transforms to display: inline elements. It has nothing to do with GSAP - it's what the spec dictates I believe.

OMG I can't believe this is a free support! Thank you so much Jack!

Sure, here's how I'd handle that: https://codepen.io/GreenSock/pen/OJwKWNq?editors=0010 You need to calculate the current value based on the progress of the tween at that point.

Thanks for reporting that @barthendrix! The minimal demo was great. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll need to clear your cache) Better?

Thank you very much for your reply. Now it's working properly. Thank you.

If you can't do what Cassie suggested, here's how you could handle it: https://codepen.io/GreenSock/pen/PoBMBXM?editors=0010 Basically, put it all into a timeline, then when the screen resizes record the current progress, revert() the timeline, create a new one and populate it so that it can map all the new path positions, and skip to the recorded progress value.

Sure, thanks for the quick reply!

Hi, Also it seems that the return/cleanup function is inside the conditional block. It should go before the closing curly brace of the effect hook. Happy Tweening!

Is this what you're trying to do?: https://codepen.io/GreenSock/pen/rNrXrXY?editors=1010

Can you house the planets inside the SVG? https://codepen.io/GreenSock/pen/ExpqLjR?editors=0010

Thanks for flagging this! @GreenSock latest beta https://codepen.io/GreenSock/pen/XWBvEWK?editors=0010 v 3.11.0 https://codepen.io/GreenSock/pen/QWBemNL?editors=0010

Yes, this is exactly what I needed! Thanks a lot!

I noticed a few problems: Your "end" value of your ScrollTrigger is "bottom top" which means when the bottom of that trigger element would normally hit the top of the viewport. So since your start is "top top" that basically means the entire pinned animation will only last as long as the height of the trigger element which isn't very much. You could make the distance from the start to the end match the height of your fake-scrolling content. Like: end: () => "+=" + document.querySelector(".how__right-content").offsetHeight Your tween is using the default ease ("power1.out"), but I assume you want it to have a consistent speed, so ease: "none" is appropriate. Is this better? https://codepen.io/GreenSock/pen/QWBevXX?editors=1010

We spoke to the engineers and you brought up a good point. We probably shouldn't be sending data so frequently in a stream over a network even through a websocket. So perhaps, 1 second intervals with chunks of data might make more sense. This should also alleviate the network but still not technically a solve on the data volume over time issue. I will keep posting my work to let you know what I came up with.

Hi, Indeed you're trying to do too much right of the bat. Start with one section and then move to the next. Perhaps these examples could provide some inspiration: https://codepen.io/GreenSock/pen/NWxNEwY https://codepen.io/GreenSock/pen/qBVgbXa/1ccf60146d680c09ba6074bf9132778d Also read the GSAP & React guide and use GSAP Context in your React/Next apps. Happy Tweening!

Hi, I couldn't tell you about why the video playback is better with a specific compression, is far beyond my knowledge. Maybe this thread could shed some light in that: As for your example I noticed a few things. You're not cleaning up in your useEffect hook, also you're not passing a dependencies array to it(it will call on every re-render, real bad for UX and performance). Finally you're not importing and registering ScrollTrigger, plus in Next you have to use the UMD modules, so you have to import GSAP from the dist folder. Here is a fork of your example that seems to work the way you expect: https://stackblitz.com/edit/nextjs-hfdw9j?file=pages%2Findex.js,pages%2F_app.js Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

This totally fixed my issue!! Thank you!!

Hi, Thanks for the super simple codepen example! In the case of that particular example just use toggleActions: gsap.to('.box',{ x:200, yoyo:true , repeat: -1, ease: "none", duration:2, scrollTrigger: { trigger:'.box', markers:true, toggleActions: "play pause play pause", } }) From ScrollTrigger docs: toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Let us know how it works. Happy Tweening!

Yep, @akapowl is right, you need to set your fixed elements outside the smoother container: <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> Here is a fork of that codepen example using ScrollSmoother so you can see it in action: https://codepen.io/GreenSock/pen/oNMRdBX Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

Here's an explanation for why that happens, and suggestions for how to work around that, from the documentation, @Tomas100 https://greensock.com/docs/v3/Plugins/ScrollSmoother Caveats position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

Short hint: You can also set more than one background image when using the background property instead of the background-image property. Programmatically removing the topmost (with a class change or direct access to the element.style) might be an option to explore if you are forced to use a background-image.

That is because as soon as you set them, the browser needs to load these images before it can display them. If you want to animate images I would suggest having all the images already loaded and show/hiding them via an animation. Can you explain why that is the case, because there is nothing you can't to with an image that you can with a div and a background-image. Most people gravitate to a background-image because they want to use background-size: cover; but you can do that with an image https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit I would suggest laying out your CSS a bit differently instead of having multiple fixed images, but this is a quick example and instead of writhing an animation for each image you can also easily use a stagger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYLXyXq?editors=0010

Hello @amitr95 I think the problems you are having might just be related to the general processing of the code's logic you run inside your function, and not really to GSAP measuring the height incorrectly. Here is an approach, that is a bit different on the logic side of things, which works fine for me with regard to the height. I also added overwrite: 'auto' to the tweens, so GSAP can sort out conflicting tweens that might be created along the way. [Note: this approach is not meant to be 100% bullet-proof. It is mainly to show, that the height gets tweened to the proper value.] https://codepen.io/akapowl/pen/VwBqJmj Edit: Since getting the logic right for something like this can become a bit tricky, here's another example of your setup, using an approach by OSUBlake - which works a lot better. Hope that will help. https://codepen.io/akapowl/pen/BaPvXQM Based on this demo. https://codepen.io/osublake/pen/JYQqZr

Hi @anjali.pandith welcome to the forum! There is no maximum duration. GSDevTools is trying to help by providing some information if you don't give it anything, but if you properly define what animation you want GSDevTools to display everything will work as expected. https://codepen.io/mvaneijgen/pen/WNKELjR?editors=0011

I'm having a similar issue with Nextjs. I'm using SplitText and i18n so if you change the language on the page(it's a toggle), all text translates except the split text even when doing a .reverse() at the end of the timeline.