Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

PointC last won the day on June 18

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by PointC

  1. Hi @Justin N :)


    Welcome to the forum and thanks for being a Club member. 🎉


    For these types of animations I almost always create a clone and set the yPercent/xPercent to +/-100. Depends on what you're doing. Then tween both to an x/y percent of +=/-= 100 (again, depends on which way you want it to go). Add infinite repeat and you're good to go. Here's an old seamless cloud demo which shows the technique. Happy tweening and welcome aboard. :) 


    See the Pen QZMraX by PointC (@PointC) on CodePen

    • Like 2
  2. Okay, a few things.

    • If you want to use ScrollTrigger on the whole timeline, you need to move it off the single tween and into the timeline vars.
    • Your end value should be "+=800" rather then "end+800"
    • When scrubbing, the durations don't really matter as they represent a percentage of the scrub distance rather than an actual duration 

    Here's a fork of your pen with some changes.


    See the Pen 3c7f4f4ac6013860491e013d5514ce16 by PointC (@PointC) on CodePen


    I've moved ST to the timeline vars. The first tween has a duration of 1 second and it draws the path. The next two tweens start at the same time via the position parameter label. The first fades the text in over 2 seconds and the next animates the letters via the startOffset attribute with a duration of 8 seconds. The next is another opacity tween that fades out the letters and that starts 2 seconds before the end of the letter loop. Finally, we have a 1 second tween that draws off the path. 


    So, we have a 10 second timeline and that breaks down to percentages of the scroll distance like this:

    0% → 10% Path draws in.

    10% → 30% letters fade in and that starts at the same time as the 10% → 90% letter loop.

    70% → 90% the letters fade out.

    90% → 100% the path erases itself.


    A couple final notes:

    • I'm not sure what you're trying to do with the onEnter and reversing the same timeline being controlled by ScrollTrigger.
    • Using letter and word spacing in the CSS will require some manual adjustments to the startOffset end value needed to make the letters fully exit. I used -200%.
    • If you want to change the opacity of individual letters as they animate, that would require separating them. Probably best to use MotionPath and convert the text to paths if that's the desired result.

    Hopefully that helps. Happy tweening.



    • Like 2
  3. If you want the text to enter one side of the path and exit the opposite direction, you can tween fromTo 100%/-100% for the startOffset. Something like this:

    See the Pen 7df4af981abf20511d3a409acf0fe150 by PointC (@PointC) on CodePen


    8 minutes ago, Dennyno said:

    And how to draw the first path before the animation starts? Does it work as any other timelines and gsap animations?

    I'm not sure I understand this part. Do you mean the path that the text follows?

    • Like 2
  4. I'm having a hard time following the question and the demo seems to have quite a bit of code to look through. The simpler a demo, the better. If you just want an "X" shaped clip to reveal an image and it should never be more than 700px wide, I'd wire it up like this.


    See the Pen vYdQJKy by PointC (@PointC) on CodePen


    Happy tweening.



    • Like 4
  5. Yep - it's pretty cool. It kinda gets overlooked these days with all the hoopla over ScrollTrigger and ScrollSmoother. You're a Club member (thanks 🎉) so you have access to all the goodies.


    Have fun.




    • Like 2
  6. 3 hours ago, coco said:

    I am actually still learning javascript

    We all are. Nobody knows it all. :)


    FTR - I'd set this up in a single SVG and do something like this.

    See the Pen vYdVwVP by PointC (@PointC) on CodePen


    You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.


    Happy tweening.


    • Like 2
  7. Hi @Rob Fleming :)


    Welcome to the forum and thanks for being a Club member. 🎉


    What you'll need to do is listen for an onComplete event for the slide position. Here's a stripped down version of my slider with just a wheel listener.


    See the Pen XWZxGVy by PointC (@PointC) on CodePen


    I've put the spans into a target array and when the slide animation finishes, it rotates the one that corresponds to the activeSlide variable. This is just a simplified example. You could have unique timelines and elements for each slide too. If that's what you need, I'd create the individual timelines and put them into an array. Then you can play the appropriate one when each slide comes into position. 


    Hopefully that helps. Happy tweening and welcome aboard.

    • Like 5
  8. 4 minutes ago, coco said:

    Yes, you are right. I could definitely have created a function where I don't repeat these exact timelines 3 times.

    That's actually how you'll solve your seamless loop problem. You'll create a separate timeline for each target and a repeatDelay that allows the first timeline to start repeating before the third one completes. 

    • Like 1
  9. Performance issues with graphics are almost never GSAP related. Those are some pretty big images to be scaling and rotating. Maybe use them as a background for the div rather than an image. 


    Just FYI - I don't even see the big circle images with text in Chrome or Edge. I only see them in Firefox so I'm not sure what's happening there. I think you'd also benefit from looping through the targets rather than manually creating three identical timelines. You could also use autoAlpha instead of display:block and alpha.


    FWIW - the rotation in FF seems smooth to me.

    • Like 2
  10. Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.



    If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.



    Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.


    When we make those changes, it all works quite smoothly and should give you the desired results.


    See the Pen eYVKKVP by PointC (@PointC) on CodePen


    Happy morphing.



    • Like 4
  11. 4 hours ago, Vivodionisio said:

    I believe I’ve been using the motionPathPlugin for animating the buttons (icons) into position. Did you mean I could be putting it to further use?

    Nope - just making sure you were using it on the stickman project as I couldn't remember seeing it in that thread. What you have here with the buttons on the path is great. 


    4 hours ago, Vivodionisio said:

    I'd be thrilled to show you once it's done : ) 

    Looking forward to it. :) 

    • Like 2