Cassie last won the day on
Cassie had the most liked content!
-
Posts
2,379 -
Joined
-
Last visited
-
Days Won
92
Cassie last won the day on
Cassie had the most liked content!
About Cassie

Contact Methods
- Personal Website
- CodePen
Profile Information
-
Gender
Not Telling
Cassie's Achievements
-
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 ☺️
-
Cassie started following Stop scrolling through all sections , Stack static image on top of the animation? , MotionPath not working with React and 6 others
-
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!
- 20 comments
-
- normalizescroll
- release
-
(and 5 more)
Tagged with:
-
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 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