mvaneijgen

I've just build something similar, check it out! Hope it helps and happy tweening! 
 

See the Pen WNWxPGV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen
 
 

GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. 
 
You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! 
 

See the Pen RwOgqJj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

I thought it was fixed, but I see it happen now again. I think the browser doesn't like rendering (or animating rem units) I've tested it with random px units and I don't see the issue. 
 
You're rem unit of 100 is also larger then the element can display, so for around half of the animation the border radius doesn't animate. 
Nope the first tween already animate to those values, so setting it again will just mean for 0.5 the animation does nothing while it animates from 1 to 1 and ("1.5rem"). 
 
I'll mark the topic to see if anyone else has some insight on rem units. 

Hi @Brandemic welcome to the forum and thanks for being a club member!
 
ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 
 
Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  
 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen
 
And here an example that mixes normal scroll with the Observer plugin
 

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen

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! 
 

See the Pen GRLmqeP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

You can set pinnedContainer: '.pin-gallery', to you imageReveal ScrollTrigger. from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
 
Hope it helps and happy tweening! 
 
 
See the Pen JjVPZGX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @Atap Tailor welcome to the forum!
 
GSAP records its starting values and when you set repeat: -1, it will repeat to its original position, so you have to call repeatRefresh: true, to have it recalculate new values on each repeat. 
 
When working with timelines I would put all the logic on the timeline and keep the tweens just for animations. 
 
Also check out our Seamlessly loop elements along the x-axis might be helpful https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/
 
Hope it helps and happy tweening! 
 

See the Pen oNOByvj?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

Lol I was just typing this out:
 
You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/
 
as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666
 
Hope it helps and happy tweening! 

Than you have to build in a delay in your animation, right now it comes in and then moves away immediately, so you have to have it come in, do nothing for x amount of seconds (I like this snippet to have a tween that doesn't nothing for 1 second `tl.add(() => {}, "+=1");`) and then move away. 

Both the codepen and the site work perfectly fine at my end in Safari version 17.2.1.
 
Any particular reason for the complicated setup with SVG and filters. I've found complex SVGs never play nice with animations, but I don't see why you can't use a normal div here with border-radius and a box-shadow, probably gets you a beter result with 1/3 of the resources need at multiple fronts (accessibility, page speed, render time) 🤷 

Hi @anzorAs, if I'm correct you can also share a link the Vercel environment where we can see and modify the code right? You're sharing a link to just the preview doesn't allow us to modify the code or even see the code, so this way we can't help you debug. 
 
If you can't share a link to a code editor in Vercel can you maybe recreate the demo in something like Codepen or Stackblitz? Here are our templates https://stackblitz.com/@GreenSockLearning/collections
 
What you can try your self is setting will-change: transform; to the elements that will have there transforms change (in your CSS), this might already help. And just to be sure there are no transition: all .3s ease-in; in your CSS, right? 
 

A view notes
The wrap function doesn't care about the index not being correct. There are only 4 items, but if you feed it index = 5 it will wrap back to the first one.  There is a logic issue in your activeIndex === 4, there are 4 items but javascript counts from 0 so this should be 3, or don't bother at all and just keep incrementing the number and let the wrap function handle it for you https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() scale 1 will do nothing, because the scale is 1 on page load.  Again no React expert, but you can just call a new tween in your on click function now it will create a new tween on each click.  GSAP calculates tweens records values on page load, so that it only has to do the animation part and not the calculation part when things should animatie. If you're having trouble with this you can set immediateRender: false, then it will wait until it is called to record the values, not pessary in this case  I thought in your previous demo you'd used the useGSAP hook which is a replacement for useEffect when working with React, please read our React guide!  
Hope it helps and happy tweening! 
 

See the Pen ZEZOmrR?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen
 
 

It is probably scroll-behavior: smooth; which gets added by Bootstrap to the html, if that is not the issue a minimal demo would be needed, to help you debug. 

Then you don't want to reverse. You have to view a tween as a video and you scrub through a video progress bar in reverse it will do the exact same thing as it would do playing, but in reverse, eg in a Youtube video people don't suddenly walk forward when scrubbing the video backwards.
 
In your case you just want two tweens that call each other when done, I've not implemented the delays, but you could easily wrap the .restart() in a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ with the delays you want. 
 
I've never seen a stagger of -0.1, when using more complex staggers I highly recommend breaking out the object and set their properties accordantly, eg here set from: "end", because you want to last item to play first https://gsap.com/resources/getting-started/Staggers
 
Hope it helps and happy tweening! 
 

See the Pen WNWxoVo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

I think this has been asked before, check out this post 
 
 
Also if I search that url I get several topics if discussing several elements of the site. Hope it helps and happy tweening! 
 
https://gsap.com/community/search/?&q=buildinamsterdam.com&type=forums_topic&quick=1&nodes=11&search_and_or=and&sortby=relevancy

Check out this post I've made. It shows you how you could setup your CSS to create any card stacking effect you want with GSAP.
 
 
After reading the post you probably want to pay special attention to this demo from the post . Hope it helps and happy tweening! 
 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

I get you visually want to snap to the end of the last horizontal section, but that is the same as snapping to the "this is the last section", so that is where I would align the snapes. Same ast he frist section, snap the end and start. Hope it helps and happy tweening! 
 

See the Pen BaEKYmy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Hi @Babken10 welcome to the forum!
 
Be sure to always use the latest version of GSAP, also TimelineMax hasn't been use since version 2 we are currently at version 3.12.5! If you're following some old guide check out this awesome getting started guide https://gsap.com/resources/get-started/
 
I've moved your label to be in the middle of each animation eg when the item is visible. Then in your .hover() function I get the element that is being hovered, gets its data-c number and feed that to the GSAP .seek() function, so now when you hover each part it seeks directly to that step and pauses the timeline. 
 
I’ve placed some comments in your JS to better explain things, please be sure to read through them!
 
Hope it helps and happy tweening! 
 

See the Pen xxeVzLW?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen
 

Hi @choma03 welcome to the forum!
 
Yes you're copying the #country path, but this doesn't inherit the clipPath that is outside of it. If you put your use elements inside the clipPath it already looks more like you want to. The clipPath is what gets cut from the background image. It doesn't draw your path element at all certainly not seeing it is in a <defs> element.
 
I've written a post that explains some gotchas with clipPahts, maks, ect. Maybe interesting for you 
 
 
The animation isn't infinite at the moment, you could check if you could line everything up and then call .restart() on your tween, so that it looks like it is infinate or you could look in to the Seamlessly loop elements along the x-axis, but I don't know if this will work for SVG elements. 
 
Also if this is the effect that needs to happen, just a white image with transparent letters cut out of it would also work and will probably be much easier to handle or look in to  creating transparent text with -webkit-background-clip: text;  -webkit-text-fill-color: transparent; https://cssgradient.io/blog/css-gradient-text/
 
Hope it helps and happy tweening! 
 

See the Pen VwNaQdR?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

First of I would not trigger a click event on something else that then in turn does some logic. I would recommend abstracting out the thing you want to happen and then make the click event and the Observer use that abstracted out function. 
 
If you haven't worked yet with the Observer plugin, it fires a lot of times when you just use it as is. It is a smart idea to build in a check if something is already happening and then preventing it from doing its thing. I've create a new variable isAnimating which is false and get set to true when it starts to animate, I've rewritten your prev and nexterPush to use an animations which sets isAnimating to false when it is done. 
 
Hope it helps and happy tweening! 
 

See the Pen dyLMvRz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

If you make your clickable elements elements that are recognized as clickable elements (eg button, which is also better of accessibility) you can set     dragClickables: false, and everything works as expected
 
You can also create your own clickableTest 
 
This is all from the docs, so be sure to read through it once, just to get familiar with everything that is possible out of the box. Hope it helps and happy tweening! 
 
https://gsap.com/docs/v3/Plugins/Draggable/
 

See the Pen mdgVoEr by mvaneijgen (@mvaneijgen) on CodePen

I knew it! Couldn't connect the dots, but I found a function of the forum that used getBBox and does some fancy calculation with it. I can't really test the different viewport sizes with this demo, but I think this is what you're looking for, seems to also fix the alignment issues. Hope it helps and happy tweening! 
 

See the Pen yLrevYM?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen
 
Here is the topic if you want to do some more reading.
 

Just as a general note, as soon as you think you're going to need more then one ScrollTrigger, there will be probably an easier way to do it with one.
 
Timelines are the most powerful part of GSAP and is my opinion the best start point for any animation. So also in your case, you have two things you want to perfectly line up. If you put them on a timeline and use some clever position parameter they will be perfectly in sync. Then one ScrollTrigger that controls that timeline and your animation is hooked to the scroll bar of the visitor!
 
I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 
 

See the Pen abxdWRP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Yeah, I think the logic @Carl uses will help you for your animation. Instead of reversing the animation just have a second part of the animation that animates it away again to its original position and then call .restart() when you want to replay it. 
 
Great course, highly recommend just pick a topic that intrest you most and then just watch a video a day. 

The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! 
 

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen