Jump to content

PointC last won the day on August 14 2019

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by PointC

  1. Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic.

    Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.



    • Like 3
  2. The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick.



    As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like.


    Hopefully that helps. Happy tweening.



    • Like 5
  3. Just a couple typos.


    //line 4 switch this
    tween.to('#box', 1{pacity:0});
    // to this
    tween.to('#box', 1, {opacity:0});
    // line 8 switch this
    const scene = new ScrollMagic.scene({
    //to this
    const scene = new ScrollMagic.Scene({

    You'll also need to load jQuery since we're using that for the resize listener.


    If you load that script and make those changes, you'll be good to go. Happy tweening.



    • Like 4
  4. Did you see this section in the article?




    Adding a fallback for unsupported browsers

    As mentioned the Intersection Observer API is not supported in Internet Explorer or as of yet Safari, so as a fallback we can check if the API is supported by the browser using if ('IntersectionObserver' in window), and if not we just load all the images automatically using our preloadImages function, but if it is supported we then use our Intersection Observer.



    • Like 2
  5. Hi and welcome to the forum.


    Just FYI — ScrollMagic is not a GreenSock product, but we do get a few questions about it. That being said, here are a couple demos from other threads which should be helpful.


    You can disable the scene for certain window sizes. Here's that approach.

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


    You could also create/destroy the controller and clearProps depending on screen size. Here's that approach.

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


    Happy tweening.




    • Like 3
  6. Welcome to the forum. :)


    Two things:

    1. You need to target the path rather than the whole SVG.
    2. There is no stroke on the path. DrawSVG only works on strokes rather than fills.

    I forked your pen and added a red stroke for illustration purposes.


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


    Hopefully that helps. Happy tweening.



    • Like 2
  7. Sorry, I meant animate the divs, not the SVGs. Right now your parent divs (.priv-key-div and .pub-key-div) have no height because the child SVG is set to position:absolute. That's why your z-index isn't working.


    Make sense?


    Happy tweening.

    • Like 2
  8. I'd probably recommend separating the two into unique SVGs and put them in their own divs. Then you can take advantage of z-index. As for the easing, yes you should be able to create a smoother animation by adjusting the easeIn and out for your moves. You can also use a CustomEase.


    Happy tweening.



    • Like 2
  9. The tween start and end values get recorded when the tween is created. In this case that is 0 degrees and 120 degrees (+=120). You then tell the engine to play the tween and repeat when it's done. So it plays from 0 --> 120 over and over. That's working as intended.


    The easiest approach is the one I posted above. If you need a delay between repeats you can use delayedCall or use an empty tween that has a 2 second duration.  Does that make sense?


    Happy tweening



  10. There would be a few ways to do that. I think the easiest in this case is to place the tween in a function that gets called at the end of each tween.


    function spinMe() {
        TweenMax.to(box, 2, {
            rotation: "+=120",
            transformOrigin: "50% 50%",
            onComplete: spinMe

    Hopefully that helps. Happy tweening.



    • Like 1