Leaderboard

transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms Hope it helps and happy tweening!

That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: https://codepen.io/GreenSock/pen/qBwmOex?editors=0010 Does that help?

Cassie your'e the goat if i could send you flowers i would haha.. thank you.. the landing page didn't open up like i thought it would but i'll keep practicing and thank you rodrigo, you guys are awesome

debugging.mp4 What @Rodrigo said. Adding that you're also using a require import which isn't needed in your setup at all. Here's a little video showing the debugging process seeing as you're new to this. I thought it might be helpful. In dev tools you can see console errors which point to the line in the file that the error is occurring. Good luck with the learning!

Very likely the same Cassie. Unless there's another Cassie encroaching on my turf. 👀 It would be best not to hijack this post though, could you start another one and link to the demo you're talking about? I'll follow it up there - Thanks so much!

Sorry to hijack the post, Cassie (If you're the same Cassie that made the awesome parallax scroll trigger I saw on codepen then kudos - it's bloody amazing!) I'm looking to (give or take a couple of things) trying to make this exact component in Reactjs but really quite struggling tbh. Your code examples look so small! I'm wondering if you, the scroll oracle, may point me in the direction to find out how I can mimic what you'ce done here, but in react.

Yes, that's perfect, thanks! I figured that would add pin spacing under the element and make the section longer than I wanted, but I guess not. Thanks again!

Hi, That is super simple with GSAP and the DrawSVG Plugin: https://codepen.io/GreenSock/pen/jEEoyw https://gsap.com/docs/v3/Plugins/DrawSVGPlugin Happy Tweening!

Hi, You can use live snap with your own custom logic and use that function to do what you're after: https://gsap.com/docs/v3/Plugins/Draggable/#as-a-function-with-custom-logic If you keep having issues, remember to post a minimal demo. Happy Tweening!

For everyone who will look at this topic in the future, here is the code for an ellipse carousel, which includes a function to display the inner div for the active element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

Hi, I'm not a wordpress developer so I couldn't really tell you about this, but there are several issues reported with elementor and the transition: all 0.3s; style that it applies to the elements. That is bound to interfere with everything GSAP tries to animates on those elements as Jack explains here: Also you can achieve the same functionality with ScrollTrigger, which would be my approach TBH: https://codepen.io/GreenSock/pen/mdVyPvK Finally is super weird that you are using GSAP to just set styles values so the transition: all stuff animates them, I would definitely wouldn't do that as well. Happy Tweening!

I was debugging, you can just ignore that. I thought maybe the draggable was initiated before the animations were complete.

Hi @kalininmax welcome to the forum! xPercent and x are to different properties, if you want your logic to work you also have to animate the element using there x and y property, not there xPercent and yPercent values. In CSS there is just one property translateX, but having them split in GSAP can be really powerful. If you want to keep the percentage based movement, just that the elements width and height an multiply it by the value you want to get, for 70% multiply by 0.7 or for 120 multiply by 1.2. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRLmqeP?editors=0010

I didn't have a lot of time to look at this, but it appears to me as though you were creating the ScrollTriggers in the wrong order. You should always create them in the order they appear on the page, -OR- you can set a refreshPriority on them instead so that you can make sure things get refreshed in the proper order. I added a ScrollTrigger.sort() at the end in order to force them to get ordered by their start position: https://codepen.io/GreenSock/pen/XWQRmmb?editors=0010 Also, this is not a good idea: transform: "translateY(100%)" It's much cleaner, faster, and more efficient to do this: yPercent: 100 Does that clear things up?

Thanks so much Cassie! I made a small change to the script so that it can intercept the data-attribute and an array to insert multiple words at once. https://codepen.io/qurtopianodesign/pen/VwNpNyN?editors=0011

Hi there! Almost there, you just need to check within the loop if the word has the data attribute that you're after, if so you can add a different tween to the timeline. https://codepen.io/GreenSock/pen/XWQMQdz?editors=0011 Hope this helps!

Ah, ok, I can't really answer that without seeing how you've coded it. But no, it shouldn't. e.g https://codepen.io/GreenSock/pen/YzEJBQm

Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render. Give this one a go? https://codepen.io/GreenSock/pen/JjVWmJj?editors=1010 debug link for mobile If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area https://codepen.io/GreenSock/pen/jORBeKe?editors=1010 debug link for mobile If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes. I often remove certain animations or create more simplified fallbacks for mobile. You can do that nice and easily with gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Hope this helps!

No, is totally fine to keep everything in a single timeline if you're carefully. In this particular case is better to move some animations out of the timeline. Is not a rule carved in stone is a case-by-case thing. Every project has it's own peculiarities and you should plan and develop them as you go based on the requirements of the project. In this case you can keep your timeline with the scrub in it just, instead of adding the menu part at the end, remove it and make that a different timeline, then you can use the onLeave and onEnterBack callbacks to play/reverse that timeline and then you can also reverse that timeline when clicking the buttons as well in order to hide that menu: // Timeline just for the menu elements const menuTimeline = gsap.timeline({ paused: true, }); // Add animations to the menu and buttons timeline const tl2 = gsap.timeline({ scrollTrigger: { // other configs scrub: 1, // use callbacks to play/reverse the menu timeline onLeave: () => menuTimeline.play(), onEnterBack: () => menuTimeline.reverse(), markers: true // shows the markers } }); // Then in your menu buttons btn.addEventListener("click", () => { menuTimeline.reverse(); // Then create other animations as well }); From the ScrollTrigger docs: onLeave Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). onEnterBack Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). Right now I'm on my way out so I can't take a good look to your demo, but hopefully this helps. Happy Tweening!

Hi @katling and welcome to the GSAP Forums! Sorry to hear about the frustrations, can relate that is no fun at all I believe the issues here are mostly logic-related ones. You have a timeline that is controlled by ScrollTrigger and that is scrubbed, that being said the playhead of the timeline is controlled by the progress of the ScrollTrigger instance based on the start and end points you pass to ScrollTrigger's configuration. Then in your buttons you have this: function selectEgg() { tl2 .fromTo("#menu-card", { x: "25vw" }, { x: "150vw" }) .fromTo(".menu-button", { opacity: 1 }, { opacity: 0 }) .fromTo("#menu-msg", { opacity: 1 }, { opacity: 0 }) .to("#menu-card", { display: "none" }) .to("#choose-menu", { display: "none" }) .fromTo( "#egg-dish", { display: "none", x: "100vw" }, { display: "block", x: "25vw" } ) .to("#egg-info", { display: "flex", opacity: 1 }); } function selectFish() { tl2 .fromTo("#menu-card", { x: "25vw" }, { x: "150vw" }) .fromTo(".menu-button", { opacity: 1 }, { opacity: 0 }) .fromTo("#menu-msg", { opacity: 1 }, { opacity: 0 }) .to("#menu-card", { display: "none" }) .to("#choose-menu", { display: "none" }) .fromTo( "#fish-dish", { x: "100vw", delay: 5 }, { display: "block", x: "25vw" } ) .to("#fish-info", { display: "flex", opacity: 1 }); } You are adding instances to the SAME timeline that is being controlled by ScrollTrigger, even further you're adding them once you have scrolled past the end trigger of the ScrollTrigger config (because your buttons are visible after that particular point). This spells trouble to me because you're extending a timeline whose playhead is already at the end or being tweened there (because you have a numeric value in your scrub config and a large one as well - more on that later). That of course is going to generate a jump and some erratic behaviour and you have to add to it the fact that you are using fromTo instances, which will change the current value of the property you're animating immediately to the value in the from configuration object and then tween it to the value in the to configuration object. You are animating the same elements that are being animated by the timeline controlled by ScrollTrigger with a scrub value in it. If for any reason the user scrolls while those animations are running, things can get really messed up because you'll have two instances battling for control over the same elements. Definitely don't do that. You have a very large value for scrub (10) that means that it takes 10 seconds for the timeline to catch up with the scroll position and the progress of the ScrollTrigger instance. Any particular reason for a value that big? The first thing you should do is avoid 1 and 2. Create completely different animations and don't animate the same elements that are being animated with the timeline that is controlled with ScrollTrigger. If you keep having issues, please change your demo so instead of images that are not loaded, use just colored divs to show what you're trying to do. Hopefully this helps. Happy Tweening!

Yep, because if we combine them all into a single tween, there's only one transform render that must occur on each tick (that's the part where the transforms get combined into a string and applied to the style). Just a small performance optimization that you'd likely never even notice in real-world scenarios but I obsess about performance. You had to create a new tween anyway on each update, so might as well just combine the x/y into that rotation one.