How exactly can we replicate the animation in this video?
I have a few options to create animations using Intersection Observer and ScrollMagic. Can anyone help me determine which approach is the best and most optimized for achieving these animations i have the assets with me the scroll animation itself I'm confused. I appreciate any help you can provide.
22 Replies
ScrollMagic even still get updates?
I would do it with IO or GSAP.ScrollTrigger -
depending on target browsers CSS scroll driven animation is an option too
yea this is what I thought xD
That is last ScrollMagic release.. xD
I used it back around that time before GSAP made scrollTrigger plugin. Its honestly not great, specially now that we have better options.
How about framer Motion, can that help me?
Not sure that's React lib.... I don't use react. So not sure about it's scrolling options.
Next js ?
Next js is a meta framework
For React
🥲 Yeah let me try with GSAP
thank you @b1mind
GL they have one the best help forums on the Internet still. Great community
Hey @b1mind how can we build the Header animations for the Lines passing to other text like this
Can we customize and use Magic UI for this, or do you have any better approach or option?
I mean again I'd use GSAP with SVG path plug-in 😅
GSAP imo is THE animation library 🥲
But really depends, for something simple it's not always needed as we get more CSS power.
MotionPath | GSAP | Docs & Learning
Animate any object along a path (or even through arbitrary property values). The motionPath can be defined as any of the following:
Hi I have tried using Motion Path Plugin but cannot rotate the animation as per the path is there any way that I can achieve the path direction correctly? @b1mind
Not sure if you have a demo of it I can look.
sure sharing u the demo
The highlighted beam lines should extend from the center to the other elements in the SVG.
I mean code
I can't look into my crystal ball to see how your trying to do it
Make a minimal code example or share the full thing
I don't use React... 🫠Can you just create a minimal demo of your issue.
Or use stack blitz or something
sure