jknott

This totally fixed my issue!! Thank you!!

Screen recording of the issue i'm referring to: https://www.dropbox.com/s/nh2f5gm67xhanpa/Screen Recording 2023-02-10 at 1.26.47 PM.mov?dl=0 Background: I have a remix / react application and i'm trying to get scrolltrigger to pin a container element. I've read through other posts, but can't seem to figure this out. You can see I set the end to be 900px, this appears to move the entire div down 900px on trigger entry. You can see when I scroll back up and it's triggered through the "end" marker it works as intended - but for some reason the entry marker makes everything shift. Any ideas? I've tried removing elements and simplifying to see if any parent container or div was the problem and it doesn't seem to be the issue. useEffect(() => { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: '#everybodyWins', start: 'top 20%', scrub: 1, pin: true, end: '+=900', markers: true, }, });

Just ran into this as well, thanks for the solution!

Ah I like your way better. Clean and you don't have to deal with the bounding box on the SVG. Thanks for sharing that!

Good to know! I think I came fairly close: http://codepen.io/jgknott/pen/vxqyMZ Added a bit more elastic. Thanks for pointing me in the right direction Jack!

I saw this animation today and thought it was cool: https://uimovement.com/ui/3462/time-tracker/?utm_source=newsletter&utm_medium=email&utm_campaign=top_5_ui_designs_this_week&utm_term=2017-04-07 I know how to do every animation, except the red panel with the timer bubbling out like it does. Are there any examples of this I could look at to see how it's done in GSAP?

Ah geez! I knew it had to be something simple like that! Thanks for your help

I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })

Wow, thanks for all the great responses and I really appreciate the level of detail you went into Jonathan! I had no idea about onCompleteParams and sending that into the onReverseComplete function, that's awesome!! I also had to clear the background-color prop, but that solved my issue. Thank you all!

I've been trying to create an accordion menu with GSAP. I have 3 menus and I want the others to reverse their animations when one is clicked. Each menu item also has a hover state.. which I think is causing my issue. If you click around on the menu items quickly, then sometimes an element is left with it's old boxshadow property. If you check out the codepen I think you'll get a good idea of what I'm talking about. Is there a better way to do what I'm trying to do?