Jump to content
Search Community

PointC last won the day on January 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    5,124
  • Joined

  • Last visited

  • Days Won

    413

PointC last won the day on January 18

PointC had the most liked content!

About PointC

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,658 profile views
  1. PointC

    Demo lagSmoothing

    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.
  2. Looks like you'd need immediateRender:false on that second tween. https://codepen.io/PointC/pen/QWoXMwx/5f531240826885ac537b347426264207 Happy tweening.
  3. +1 except I now have to say Illustrator instead of AI otherwise everyone gets confused. 😜
  4. Here's an oldie but a goodie from our own @OSUblake. Should give you some ideas. https://codepen.io/osublake/pen/oGoyYb
  5. 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.
  6. PointC

    GSAP Stagger loop

    Just FYI - your position parameters were correct in the initial demo. The overlap I saw was that font size rather than a weird overlap tween. The position parameter adjustment fix I posted would still work though. My mistake - sorry about that. Weekend brain. It should still be much easier in a loop and using yPercent. Happy tweening.
  7. PointC

    GSAP Stagger loop

    Yeah - it's just hard to keep track since the start of one is based on the prior one, but that one is based on the end of the prior one etc... Kinda gets weird and hard to follow with different length words and tweens. I think it might be easier to set this up in a loop and use yPercent to move the targets. This could still present a few challenges though. Here's a fork of your demo with yPercent. https://codepen.io/PointC/pen/bGZaEJR/3edf621a86455b30dd00b80ed2d18174 It woks really well until the 'moment' characters start overlapping the 'time' characters. It's not a miscalculation as you can see that the 't' in time moves in unison with the 'm' in moment. The problem is the width of the m is wider than the first two letters in 'time' so it looks odd. A solution to that is adding a slight delay for the new word to move in like this. https://codepen.io/PointC/pen/wvOpGgP/81a43bf9e46371fbd730053644797add I think that works pretty well and the delay is a variable so you can adjust it to your liking. To further illustrate what we're seeing with the Poppins font, I've switched the first demo to use a mono spaced font with no delay. You can see that everything works perfectly since all letters are the same width. https://codepen.io/PointC/pen/WNmdwRz/7ffb8c2abadabf74ee8e01ca0f2a3904 Since it's all created in a loop now, it's more flexible so you can add as many words as you want and it will all work correctly. You'll still need to manually add a duplicate of the first word to the bottom of the stack in the HTML with these demos, but you could also add some code to clone it if you prefer. Hopefully this helps. Happy tweening
  8. PointC

    GSAP Stagger loop

    Yeah - with a longer stagger, you're gonna get a weird overlap like that because your words aren't the same length. The shorter word "time" is waiting to start rolling out until the prior one has animated in, but the one after "time" is again 7 characters and it starts animating in at the beginning of the rollout and this is causing problems. A quick and dirty fix is just to make a little adjustment: .to(chars4, {y: -80}, "<+=0.4") The position change is just double the stagger since we have two fewer letters in the chars3 targets. This is just a band aid though and not flexible at all since you need to make some manual calculations. I'd probably create a loop and calculate the duration() of each tween/timeline and set the position parameter accordingly. Best of luck and happy tweening. https://codepen.io/PointC/pen/XWGzLep/3834e411d95e66f428b711e972a2d87f
  9. You're using .from() tweens. When you interrupt one and then start a new .from() tween animating the same property, you probably won't get the desired results. Say you have a div sitting at x:0 and you tween from x:100, but you start a new tween before that one is finished. Now the new tween will still start from x:100, but will finish at wherever you interrupted the last tween as that is the new final position. Say it was at the half way point, the new tween would now go from 100 → 50 rather than 100 → 0. That's why your splitText letters start to look weird with multiple plays. The easiest solution is as @mvaneijgen suggested - make a tween/timeline and play()/reverse() on click . Happy tweening.
  10. Another option when adding multiple targets to a motionPath: You can stagger the start times and advance the tweens to the full duration or add individual tween to a master timeline. This would be in lieu of using the start/end values. in the motionPath object. Just my two cents to keep your code DRY. Happy tweening. https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ
  11. PointC

    Nested Accordion

    Just FYI - the demo of mine you posted can open the first panel automatically by adding this to the end of the code. toggleMenu(menus[0]); Though I'd probably just use the code @Rodrigo posted. https://codepen.io/PointC/pen/wvOreNG/e5bd6227d11542f55fec6013c8272a4c
  12. I'll drop off my Mod badge at HR and clean out my locker.
  13. I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect. It's quite simple so just a tiny bit of CSS is all it takes to make it work. Just my two cents. Happy tweening. https://codepen.io/PointC/pen/ZEPJRKG
  14. Instead of scaling the SVG, another option is animating the viewBox. I have a tutorial about that here: https://www.motiontricks.com/basic-svg-viewbox-animation/ Just a thought. Happy tweening.
  15. Just another little FYI - if you don't want to reverse() the array for some reason with this type of animation, you can use a negative stagger value. Happy tweening. https://codepen.io/PointC/pen/rNRwMWX/86b831b335e0f82913a126d5f358a93c
×
×
  • Create New...