PointC last won the day on
PointC had the most liked content!
PointC
Moderators-
Posts
5,134 -
Joined
-
Last visited
-
Days Won
415
PointC last won the day on
PointC had the most liked content!
About PointC
Contact Methods
- Personal Website
- CodePen
- Company Website
Profile Information
-
Location
Seattle area
-
Interests
web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds
Recent Profile Visitors
62,941 profile views
PointC's Achievements
-
You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.
-
Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe
-
Using preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread: I would probably come to the same conclusion as that thread and generate the curved line dynamically. Happy tweening.
-
Welcome to the forum. If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates. https://codepen.io/PointC/pen/xxeaKeo/48ff3b51feeaaec506ed6260b59efa17 If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll. https://codepen.io/PointC/pen/dyLqybY/f291cb8f00561f83216ca7df0680ea9b Happy tweening.
-
If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.
-
Is it possible to use MotionPath to start at the end of a path and go backward?
PointC replied to SamStAubyn's topic in GSAP
sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening. -
Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.
-
hmmm... the only other ones that come to mind off the top of my head are these:
-
Is this the one you meant?
-
Yeah - I'd be curious about what you're building as well. Maybe a demo? You can find more info about lagSmoothing under the gsap.Ticker() property. https://gsap.com/docs/v3/GSAP/gsap.ticker()#gsaptickerlagsmoothing Happy tweening.
-
Looks like you'd need immediateRender:false on that second tween. https://codepen.io/PointC/pen/QWoXMwx/5f531240826885ac537b347426264207 Happy tweening.
-
+1 except I now have to say Illustrator instead of AI otherwise everyone gets confused. 😜
-
Here's an oldie but a goodie from our own @OSUblake. Should give you some ideas. https://codepen.io/osublake/pen/oGoyYb
-
A couple tutorials which may help. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ Other helpful info. https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening.