Jump to content

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

Carl last won the day on May 28

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Posts posted by Carl

  1. oh, ok, probably best to continue in that thread. 

    It was very nice for @Ali Manuel to help you but we don't typically have the capacity to rebuild other people's projects on demand with new specifications.


    While I'm here though I believe making this full-screen will require some significant changes to the CSS and it's not really something that you would do with GSAP. 


    If you have a question related to GreenSock animation please don't hesitate to ask.


    • Like 8
  2. Good to see everyone else's excellent advice got you where you need to be.


    Just as an fyi, that jumpiness that you were seeing prior to scrub:(number) was because some browsers don't have smooth scrolling enabled. I'm willing to guess if you scroll this very page you'll notice that the scrolling happens in small jumps and isn't smooth.


    The video below illustrates what smooth scrolling is and how some third-party libraries have been created to smooth out those little jumps.



    I've found FireFox on Mac and more recently Chrome have smooth scrolling available natively.

    • Like 2
  3. Glad to hear my suggestion might get you going in the right direction


    32 minutes ago, Steve Giorgi said:

    I would simply make my dummy DIVs relative to the duration I need each of my component timelines to run, correct?

    Yeah, that sounds about right. There's a section at the bottom of the ScrollTrigger docs that explains how durations work with scrub:true

    https://greensock.com/docs/v3/Plugins/ScrollTrigger but it sounds like you have a handle on it.

    • Like 1
  4. 2 things that might work


    1: put all the animation in one timeline I used this GreenSock starter demo 

    See the Pen qBdzqmR?editors=1010 by GreenSock (@GreenSock) on CodePen

    and made some slight modifications to achieve "multiple fullscreen slides that are sitting on top of each other with their own scrubbable animation"


    See the Pen bGqvpqG?editors=1010 by snorkltv (@snorkltv) on CodePen


    instead of sliding panels in, I just faded them in


    2: position all your panels on top of each other but create a long page of "dummy divs" that is scrollable and contains child divs that act as the triggers for the animations in your panels (components)


    Again, a demo may help, and from what you describe React isn't necessary to figure out the page setup or animation code. the simpler the better.




    • Like 3
  5. Hi Nadia,


    In addition what @Cassie suggested I'm curious what part exactly you need help with. Do you have a basic animation already set up that you just need to control with scroll? Do you know how to animate text changing without scroll? Do you have an animation of a shape changing size? 


    We're happy to help you along the way, but it's difficult to know exactly where to start and we're not in the habit of just building projects for people.


    If you need help "getting text to change" perhaps this video will help you. But even something as basic as "changing text" can be done a dozen different ways.




    See the Pen XWJzrQq?editors=0010 by snorkltv (@snorkltv) on CodePen



    And as Cassie said, it's much easier to help you if you provide a demo showing what you are working on so that we know exactly which parts need changing.


    • Like 2
  6. Hi and welcome to the GreenSock forums,


    It sounds like you are running your javascript BEFORE the DOM is accessible.


    Either put your tween code inside the jQuery document ready OR just make sure your script is right before the closing </body> tag.

    gsap.to(".cont", { // selector text, Array, or object
      x: 100, // any properties (not limited to CSS)
      backgroundColor: "red", // camelCase
      duration: 1, // seconds


    or if you code is in that external file, load it right before the closing body (not in the head)

    <script src="script.js"></script>


    • Like 5
  7. .panel1, .panel2, and .panel3 are used as unique selectors to select the panel that will be animated. 


    inside the function those selector strings are used to dynamically select child elements


    function createPanel(panel) {
      var tl = gsap.timeline();
      tl.from(panel + " .bg", {duration: 0.4, scale: 0, ease: "power1.inOut"})


    when you call createPanel(".panel1") then the first tween in the timeline shown above will use the target selector ".panel1 .bg" which will scale the background element in .panel1


    when call createPanel(".panel2") then the next timeline animates ".panel2 .bg" and so on. 


    This is how all 3 panels get the same animation.


    Make sense?





    • Like 2
  8. HI.


    This is what we refer to as "functions that create and return timelines". You'll notice each panel has the same animation.

    The createPanel() function takes in a panel class as a parameter. The function then creates a timeline that animates a bunch of elements in that panel. That timeline is then inserted into the master timeline.


    Another way to put it is "the master timeline is adding the animation that is created and returned by the createPanel() function when we call it and pass in a particular panel."


    This is a very powerful technique when you want to do similar things to multiple items. 


    If you're interested I have a complete, multi-part video tutorial teaching how to build something like this step-by-step from the ground up in my course GSAP 3 Beyond the Basics.



    • Like 2
  9. hmmm, did you watch the Ferris Wheel lesson (members only link) in B-sides, bonuses and oddities? It's literally the next lesson after the Circular Distribution one that you are using and It explains how to counter-rotate each element to build a ferris wheel


    See the Pen RwKOrVb?editors=0010 by snorkltv (@snorkltv) on CodePen


    the circles demo can be updated to use a negative rotation on each circle


    See the Pen wvJeVzW by snorkltv (@snorkltv) on CodePen



    • Like 3
    • Thanks 1
  10. hmm, i'm not understanding exactly what you want. 

    Have you looked at the distribute() utility function? It makes ease-based distribution of values very easy: https://greensock.com/docs/v3/GSAP/UtilityMethods/distribute()



    also keep in mind that eases themselves are functions that return values based on the progress you pass in.


    So you can do something like Power4.easeIn(0.3) and get the corresponding y value on the ease graph.


    Perhaps this pen will help you understand how it works


    See the Pen ZEpzdZq by snorkltv (@snorkltv) on CodePen


    click around and you'll see you get more small circles than large circles


    You can do a similar thing with CustomEase by passing it into parseEase.


    open the console on this pen:

    See the Pen GRWmwqe?editors=1111 by snorkltv (@snorkltv) on CodePen


    Once you interpolate your value perhaps you can pass that into your CustomEase


    if you need more help please provide a minimal demo and some more info on what you want to do.

    • Like 3
  11. Glad to see you are enjoying "the fabulous" creative coding club.


    Not sure how you want to dynamically change the svg artwork but the problem with using an id is that your id is a number. a CSS id can not start with a number or just be a number. try something like


    circle.setAttribute("id", "circle" + counter++)


    For changing the colors there are plenty of options.


    I like stepping through the hsl() hue values to get a nice rainbow effect


    See the Pen dyvNLpX?editors=1010 by snorkltv (@snorkltv) on CodePen


    using gsap.utils.wrap() you can also step through a pre-defined array of colors


    See the Pen ExWZJNY?editors=0010 by snorkltv (@snorkltv) on CodePen


    You have access to my wrap lesson in creative coding club, but here it is for anyone else who happens to be meandering by

    So glad to see you are enjoying the lessons and most of all trying stuff on your own! Great job.

    • Like 5
    • Thanks 1
  12. thanks for the tip in the article. looks like 2 scrolltriggers is the way to go.


    your demo is great and I'm sure it would help.


    there is already this demo below which covers a lot of ground but as such it's also quite wordy and a lot of stuff happens outside the viewport


    See the Pen LYVKWGo by GreenSock (@GreenSock) on CodePen


    I love the simplicity and clarity of your demo, especially since you can see the events fire exactly when the markers intersect on the way up and down.



    the only change I'd suggest is to space the scroller-start and scroller-end markers so that its SUPER clear that events fire when end passes scroller-end like so


    See the Pen jOByybw?editors=1010 by snorkltv (@snorkltv) on CodePen


    • Like 6
  13. glad this helped



    How to reset the animation on backscrolling only when the element is outside of the viewport?


    I'm not sure there is an easy way to do that with your current start and end settings.


    The trick with this stuff is to really play with things so that you can accommodate the most common use cases with the most pleasing visual result.

    reset is very jarring if the user sees it. 


    I made it so that the animations start when the bottom of the triggers reach the bottom of the viewport. I added reverse for onLeaveBack and I think it works very nicely (if your window is larger then the tiny embed below. go full page)


    See the Pen rNyjWVW?editors=1000 by snorkltv (@snorkltv) on CodePen


    Perhaps someone else will have a solution for doing a reset only when the item is fully out of the viewport.




    • Like 3
  14. thx, it looks like I wasn't following you perfectly there. however, I think there is some confusion about when onEnterBack happens.


    I modified your demo to only include one section. I added a little callback that changes the background color of the page when onEnterBack happens.


    See the Pen XWMpXyd?editors=0010 by snorkltv (@snorkltv) on CodePen


    Scroll up and down all the way.  You will see that the animation does not reset when onEnterBack fires. It only resets onLeaveBack (4th toggle action) as you have it set that way.


            //onEnter, onLeave, onEnterBack, onLeaveBack
            toggleActions: "play pause none reset",


    My understanding remains: onEnterBack is set to none and is behaving as you have it set up. onLeaveBack is set to reset and this is why your animation resets.


    Does this make sense? Am I missing something else still?

    • Like 6
  15. welcome to the forums,


    thanks for the demo, it's a great start.


    I added a spacer on top and bottom of the page so that all elements could scroll in and out of the viewport fully.


    See the Pen VwpPevm?editors=1010 by snorkltv (@snorkltv) on CodePen


    it appears each section behaves the same way. I don't see the third section acting any differently. your onLeaveBack is set to reset and that appears to be working correctly. the animations resets to a progress(0) where everything has opacity:0 when the start position moves down past scroller-start.


    Your onEnterBack is set to none, and that appears to be working properly for each section as well.


    Perhaps I'm misunderstanding the issue. feel free to clarify so that we can help you better.





    • Like 5
  16. please watch the MorphSVG getting started video here: 


    It's a touch dated, but explains the basics of setting up a morph animation. the end shape that you are morphing too most often is just used for the path data, there is no need to see it while the animation is happening. the video covers this.

    • Like 4