Cassie

If you export out the SVG then open it up in a text editor you'll be able to see the SVG markup. pop the SVG markup into a demo on CodePen for me and I'll show you how ☺️

I think there's too much focus on 'best practices' nowadays - I tend to go with 'If it works it works' Two images would work here, as would using an SVG with separate grouped elements. Whatever is easiest for you and whatever works is likely the best solution. Glad to hear you're enjoying the tools!

Thanks for the heads up!

Seems like this is working without the scoped selector but not with... https://codesandbox.io/s/gsap-motionpath-react-forked-miy8hl?file=/src/App.js Not sure why. Maybe @OSUblake will be able to give some insight?

Heya! It's often a good idea to use one timeline and then play and reverse it. Like so https://codepen.io/GreenSock/pen/PoqRZOB Hope this helps. p.s have you seen our react guide?

There are a lot of questions here. Going from your questions about the difference between gsap.to and tl.to it seems like you're lacking in some core understanding. gsap.to is a tween and tl.to is for adding a tween to a timeline. These are two core concepts that are very important to understand before progressing further into other plugins. This is a great video for anyone getting started with GSAP. Can I suggest you take some time to watch it and then if you still have questions, pop back and we'll do our best to explain. Getting Started with GSAP from GreenSock on Vimeo. Additionally That's fine - all you have to do is put multiple divs into the HTML - as long as you have multiple elements you can crossfade them.

Hey, I've taken a look at your demo - you're using deprecated syntax. TweenMax and TweenLite are very old versions of GSAP - Check out the migration guide. This guide may also help with React. Here's a demo of pinning using updated GSAP syntax, react and ScrollTrigger.

Hey there. I can't see the video you're after. But it sounds like you need draw SVG to draw the stroke of an arrow out though. Attempt that first, then when you've got the animation working the way you want, hook it up to scroll with ScrollTrigger. DrawSVG first - don't worry about ScrollTrigger yet. Pop back here if you have questions with a minimal demo.

Also - worth mentioning that we don't provide 'animation components' We provide the tools used to create animations, but all the demos that people make with GSAP are custom to their use case. If we had an example that looked like this I would happily provide it for you. As I mentioned, this looks like you'll need ScrollTrigger, but starting with ScrollTrigger is often the wrong way to approach things. Start off by creating a timeline that animates the elements in the way you're after. If you're battling with that, as @mvaneijgen says, post a minimal demo showing your work so far and we'll give you a hand!

You'll need SplitText for customised text animations - scrambleText is just for scrambling. ☺️

Yes certainly - you can do whatever you want! Observer is just handling the events for you. What you choose to do on those events is up to you. You will have to write that logic yourself. Here's an example of mixing together Scrolltrigger and Observer https://codepen.io/GreenSock/pen/qBVgbXa/1ccf60146d680c09ba6074bf9132778d?editors=0011

Heya Cartos! If you're a beginner I would start off by just creating the animation. It's easy to hook animations up to scrollTrigger afterwards, so just focus on the animation for now. Here's our getting started article. Pop back with a demo showing what you've tried if you have any questions! Have fun!

I'll dig into this in a bit, but just a tip from a quick glance. You can use matchMedia to handle timelines on different devices. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

Aha, excellent. Over to Blake then!

Maybe you're looking for observer instead? https://greensock.com/docs/v3/Plugins/Observer https://codepen.io/GreenSock/pen/XWzRraJ