Cassie

Heya! Yeah it seems like unpkg is down at the moment, you can use the jsdelivr links from our install helper instead

https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=true&require=false&trial=true
 
Draggable has an autoscroll property, maybe that's what you're after, from the docs it looks like it should work for any scrollable container
https://gsap.com/docs/v3/Plugins/Draggable/autoScroll/

If you're not changing the x value all you could just add another tween to animate that?


See the Pen WNWgdZV?editors=0010 by GreenSock (@GreenSock) on CodePen
 
The box was invisible becasue there wasn't a background color defined, the previous codepen used an external stylesheet. How did you 'clone' it? If you just pressed 'fork' at the bottom it should have just copied everything exactly. This video shows where the fork button is
 

Yep!
 
You just need to work out how far you want it to move.  Just numbers. So that's the furthest point, minus the width of the last box and the offset amount.
 
I find sketching stuff down and drawing out the measurements I need helpful sometimes.


See the Pen RwOYLeP?editors=0010 by GreenSock (@GreenSock) on CodePen

This video is showing completely different functionality though. There's no layered panels here.

In the video, the panel that the tree is in doesn't reveal the panel beneath it or get revealed by the panel above. It's just a normal scrolling page, then the tree gets pinned for a while. It feels like you're trying to mash together two very different things here. I'm not really sure how you're aiming to combine them?

Maybe something like this is closer?


See the Pen VwNBOQZ?editors=1010 by GreenSock (@GreenSock) on CodePen

Hi there!
 
Our React docs are a good place to start. There's everything you need to know there in order to port the animation over to react
 
https://gsap.com/resources/React/

If you need specific help, pop back with a demo showing what you've tried.

Hi there!
 
Thanks for the kind words.
 
Yeah, canvas is usually better for stuff with lots of elements. Pixi is a library that uses canvas so it makes stuff a little easier than using the browser API directly. Your example is pretty simple though so maybe you could just skip pixi and use canvas?
 
Here's a canvas demo that may help

See the Pen abMMOar?editors=1010 by ninja1pro (@ninja1pro) on CodePen


And a pixi demo (this is using old GSAP syntax - but it's using pixi to add images so that's helpful)
See the Pen qBEJVeN by Koenie (@Koenie) on CodePen


The pixi docs are good too
https://pixijs.com/8.x/guides/components/sprites

Hey, so you can achieve this with another loop within your current loop.


See the Pen LYvrxwd?editors=1010 by GreenSock (@GreenSock) on CodePen


If that's not the correct order, the easiest way to fix that is to change the order of the items within the SVG, but you could also use array methods in JS to swop the order around.

If you need to adjust the timing, you should look into the position parameter.

Hope this helps!

 

Hi there!
 
Seems like you may have forgotten to add the main GSAP file?

https://gsap.com/docs/v3/Installation/?tab=cdn&module=esm&method=private+registry&tier=free&club=true&require=false&trial=true&plugins=ScrollTrigger
 
Have you included both the script tags found on this page?

Tip to get you going, it'll likely help if you add this image sequence to a timeline. Right now the function's returning a tween so you can place it into a timeline using .add


See the Pen GRLENVm?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey, a couple of small issues here
 
One's a little syntax thing, you capitalised DrawSVG in the tween, the other issue is maybe an expectation thing?

I've coloured the strokes and fill differently so you can see what DrawSVG does.


See the Pen ExJQEYX?editors=1100 by GreenSock (@GreenSock) on CodePen
 
Hope this helps

We're back up again everyone! Thanks for bearing with us through this outage. 💚

You have to create ScrollTriggers in the order they appear on the page, if you have multiple forEach loops this might be throwing things off.

Might be helpful to look into refreshPriority and sort?

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

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.


See the Pen XWQMQdz?editors=0011 by GreenSock (@GreenSock) on CodePen
 
Hope this helps!

Hey there.
 
Unfortunately safari/IOS is pretty frustrating when it comes to animation. I've noticed far more rendering issues recently as well 😕.
 
You're already using transforms to animate and (if you copied this demo) you have will-change: transform on your element, so that's good. Those both help with performance.
 
Next up I'd check the contents of the cards, do you have incredibly large images or any filters/drop shadows on then. If you can reduce the size of the images that may help, similarly removing filters or drop shadows.
 
Sometimes certain animations just aren't possible on mobile though. If you do test and run through these steps with no luck, it may be time to look at making a simplified version for mobile. You can use matchMedia for this.

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/
 
 I would initially try and see how the carousel responds without snapping, and with and without inertia.  If you can show us the code you're actually using we might have other advice, but for now that's all I can give you.
 
Sorry there's no magic bullet! Good luck!

Hey there! 
 
So this isn't a GSAP set thing. I've tweaked the demo so you can see what's happening. (I 've added a viewBox so we can see the bounding box of the SVG more clearly)
 
Untransformed circle (green)
The circle, by default, is positioned exactly at [0,0] without the GSAP transform added. Perfect
 
Transformed circle (red)
If you add the x and y coordinates to a circle element it ends up at the correct place - this is because the circle starts exactly at [0,0].

Untransformed Hand (purple outline)
The hand however, with the same transforms applied is positioned below and left [0,0]. So it's starting point is offset from the very beginning. This is because the bounds of a group just reflect the bounds of its contents. The hand path isn't drawn to start at [0,0], so the g isn't bounded by a point at [0,0]
 
Adjusted path - (Green outline)
I adjusted your path to start at [0,0] - awkwardly, the way the pointer was drawn means the start of the path is at the bottom of the hand 🫠

Adjusted and transformed path - (Red outline)
With the adjusted start point the hand ends up on the dot as expected.


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


I'd recommend redrawing the pointer so that the beginning of the path is the tip of the finger and starts at [0,0] - that'll solve your problem neatly, or just add some 'magic number' offsets now that you understand what's happening. 

Hiya!
 
You need to add pointer-events: none to that circle. It's interfering with the mouse events at the moment.

Also just a heads up, but this is very old syntax. There's no TweenLite anymore - it works for now but we may deprecate it in future versions so it's best to use the latest.
 
// old TweenLite.to(circle, 0.3, { opacity: 1, scale: 1, }); // current v3 syntax gsap.to(circle, { duration: 0.3, opacity: 1, scale: 1, });
There's also a more performant way to animate on mousemove - quickTo. 
 
Here's a demo

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/
 
Hope this helps!

Heya,
 
Yep, if you've followed the youtube video you'll have seen how to do it.  You can't change the order of table rows with a class, but you can physically manipulate the DOM.
 
1) Grab the state
2) Update the DOM with JS
3) Animate!
 
Here you go -


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

Great spot! Thank you for pointing that out 💚

Hey there!
 
So the timeline is working, but you're trying to stagger multiple elements *inside* a for loop (where you only have access to one element at a time)

Rather than stagger, you could do something like this where you define the timeline outside of the loop, then loop round and add each line to the timeline
const timeline = gsap.timeline(); const titles = gsap.utils.toArray<Element>('p', container.current); // loop round the titles titles.forEach((title) => { const splitTitle = new SplitText(title); // add each title to the timeline timeline .from(splitTitle.lines, { opacity: 0, y: 20 }) .to(splitTitle.lines, { opacity: 0, y: -20 }); }); https://stackblitz.com/edit/stackblitz-starters-mcygak?file=app%2Fpage.tsx

Alternatively you could push all the lines into an array and then stagger them - something like this
const titles = gsap.utils.toArray<Element>('p', container.current); const lines = [] // loop round the titles titles.forEach((title) => { const splitTitle = new SplitText(title); lines.push(splitTitle.lines) }); // add each title to the timeline gsap.timeline() .from(lines, { opacity: 0, y: 20, stagger: 0.2 }) .to(lines, { opacity: 0, y: -20, stagger: 0.2 }); (sorry I don't understand typescript to adjust that for you)

Hope this helps!

Hi there!
 
Looks like you're just pinning the wrong section - does this do what you're after?


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

If you're referring to this one
 
 
@Rodrigo will see that tag and reply once he starts work later today

Hi! It's important to create your ScrollTriggers in the order they appear on the page, you can't do that in this example because you're looping around for the colours.

You can use .sort to reshuffle and organise your scrolltriggers if you can't define then in the right order.
 
https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/
 
You don't need to pin the content, so you don't need pinContainer - you can just pin the horizontally scrolling section.

If you do this you'll also need to change the end trigger based on whether the section is pinned or not.
let isPinned = elements.classList.contains("pin"); ScrollTrigger.create({ trigger: elements, start: "top center", end: () => isPinned ? `+=${scrollList.clientWidth - introWrapper.clientWidth}` : "bottom 60%", ... })


See the Pen bGZpvzp?editors=0011 by GreenSock (@GreenSock) on CodePen
 
I hope this helps!

Hi there!
 
Thanks for being part of Club GSAP 💚
 
So in this demo your sticky item is inside the container that GSAP is pinning .page-content - when GSAP pins something the pinned element gets immediately wrapped in a <div> with a fixed width/height to match. A class of "pin-spacer" is added to that wrapper. Think of it like a proxy element that props open the space where the pinned element was in the DOM so that when it flips to position: fixed things don't collapse.
 
TLDR - CSS sticky doesn't play nicely with this. The solution is to use GSAP's pinning abilities instead.
 
You will need to account for the offset start position by declaring that it's in a container that has been/is being pinned

Also, nested pinning is not supported so we kinda have to hack around a little by adding pinReparent:true - it's best to avoid this by setting up your DOM to avoid nested pinning, but I'm not sure how to avoid this in your case.
 
 


See the Pen MWxKrNM?editors=1010 by GreenSock (@GreenSock) on CodePen
 
Hope this helps!
 

Yeah as I showed in the demo above, you would need to fire it on load with another useGSAP hook.

I linked to this section in our guide which explains more. https://gsap.com/resources/react-basics#creating-and-controlling-timelines

If you want to know more about contextSafe you can see go to this section of the guide. https://gsap.com/resources/React#making-your-animation-context-safe
 
edit

I just tried this and realised it's a bit messy because of React's strict mode thing (React 18 fires effects twice in strict mode, so we need to ignore the second call or flip's state will be saved *after* the classes are changed in the DOM. 🫠 React makes everything so tangly.

https://stackblitz.com/edit/stackblitz-starters-bhj216?file=app%2Fpage.tsx

If anyone sees a better way feel free to jump in. 
 

Actually! It's a pretty simple one so here you go.


See the Pen mdoVVdE?editors=0010 by GreenSock (@GreenSock) on CodePen
 
Have a little play around with the stagger and duration, if you uncomment the scrollTrigger it'll hook it up to scroll, you can see the markers for the start and end points too.
 
The docs have info on all these properties. 💚