Jump to content
GreenSock

Carl last won the day on October 13

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,681
  • Joined

  • Last visited

  • Days Won

    540

Posts posted by Carl

  1. ha, that's a pretty funny oddity. I haven't seen that before.

     

    I switched to using a set() (no animation) an I used the position parameter instead of duration.

    feel free to change the duration variable

     

     var duration = 1;
      gsap.delayedCall(1, () => {
        let textTimeline = gsap.timeline({ repeat: -1 });
        array.forEach((obj, i) => {
          textTimeline.set(".switch-text", {
            innerHTML: array[i]
          }, i * duration);
        });
      });

     

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

     

     

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

    Thanks for the clear demo.

    It seems you found an alternate solution but this could work too

     

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

     

    This allows the text-1 to fade in from the start.

    Note I set the opacity of all h1 tags to opacity:0 in the css. This removes the flash of un-styled content and makes the looping cleaner as I implemented it using the label. 

     

    You could also approach this using a special stagger technique but I don't want to throw too much at you if you're just starting and you're comfortable with your solution.

    • Like 3
  3. Hi @ti-sign

     

    Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this.

     

    I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" 😁

     

    I came up with this approach in my lessons

     

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

     

    The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. 

     

    Perhaps you or someone else will have fun experimenting with this technique as well.

     

    As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!

     

     

    • Like 2
    • Thanks 1
  4. thanks for the simple demo.

    my jQuery is a bit rusty, but I recall that hover would handle 2 functions for mouseenter and mouseleave.

    The biggest issue is that you are creating a new timeline on every hover.

    I don't really know what the end result is but usually it is best to create the timeline once for each element and then control it differently for each mouseevent. 

     

    hopefully the following can get you going in the right direction.

     

    See the Pen VwdQYRb?editors=0110 by snorkltv (@snorkltv) on CodePen

     

    "play none none none" looks like toggle actions for ScrollTrigger and wouldn't apply at all here.

    • Like 2
    • Thanks 1
  5. Hi Adam,

     

    Thanks for the mention. So nice to hear you are finding the courses helpful.

     

    That's a cool animation you have already. 👍

     

    I don't have time at the moment to experiment with this, but in addition to @GreenSock's great advice I'd recommend taking a step back perhaps and see if you can get the visual effect you want to work in just a straight line.  It might get a bit challenging with the rounded corners AND with the stroke length changing size. As the stroke gets smaller, less of it is going to be under the part of the gradient that fades it out. 

     

    Unfortunately it's these types of experiments that can take some time to figure out. 

    • Like 1
  6. 1 hour ago, Creek said:

    Obviously not being a guru - are you relating that you still use Animate code? Or you're only using it to get the animation down, following then with the "cleaner" GSAP (guessing here) ? 

     

    I don't use Animate with code. Unfortunately Adobe doesn't do much to support the canvas export. The underlying framework, CreateJS, was abandoned by its creators years ago so there is very little hope of any improvements. It's a shame as there was a lot of potential and GreenSock code worked well with it all. 

     

    I just use the timeline's keyframes and tweens for very simple animation mockups and such for video or gif export. Basically anything that is fixed size and aspect ratio.

     

    I would not recommend it for any type of web development as it has no support for DOM elements, SVG, or anything related to responsive layouts.

     

    The secret sauce as @GreenSock mentioned is to get a firm grasp of the basics and slowly add more stuff as you learn it. This front-end stuff is pretty complicated these days and everyone has to suffer through quite a bit to get good. I wish we didn't, lol. 

     

    @The Old Designer glad to hear you enjoyed my courses. thx for the recommendation!

    • Like 2
    • Thanks 1
  7. 5 hours ago, Creek said:

    Is there any program you might recommend for easily creating animation - that perhaps just spits out video? 

     

    For me Adobe Animate is the answer here. I still use it for 95% of my design work. I'll also use it occasionally for basic animations when the end goal is an animated gif or short video and I don't want to deal with the hassle of creating things with html and css.

     

    And although I probably fall into the group of people who can "just code animations as easily as typing a message on a forum", it still requires a tremendous amount of time to set things up and refine the timing and such. For a short animation I may literally write the basic animation code in 15 to 20 minutes but there's 3 or 4 hours (at minimum) of other tedious stuff and much more if you are adding interactivity or variations for different screen sizes.

     

    All this to say, don't get discouraged. It takes a lot of time and practice to build up the skills. Once you get a few GSAP muscles in shape you'll be amazed at how much control you have over the animations with very little code.

    • Like 1
    • Thanks 1
  8. that is correct, you can't use groups in a clipPath.

    you can give multiple elements in your clipPath the same class and move them all at the same time. 

    scaling and rotating could get a bit weird though. not really sure what you're trying to do. 

  9. You can animate things inside a <clipPath> fine in Safari as shown in this demo here

    See the Pen yLEOdJK?editors=0110 by snorkltv (@snorkltv) on CodePen

     

    I noticed you are using <clippath> instead of <clipPath>. Maybe safari is picky?

     

    I had trouble following your demo with the loops and mediaqueries. 

    If you still have trouble please reduce it down to a single tween on a single element if that works, then slowly build up. 

     

    • Like 1
  10. Thanks for the clear demo. Things are working as designed. Changing the duration of a tween after it is inserted into a timeline does not shift every animation after it. This is done mainly as a performance optimization as it would be quite taxing for every animation to constantly be aware of changes to its duration. 

     

    However, you can use shiftChildren()

    https://greensock.com/docs/v3/GSAP/Timeline/shiftChildren()

     

    demo

     

    See the Pen BaVjjrX?editors=1011 by snorkltv (@snorkltv) on CodePen

     

     

     

     

    • Like 3
  11. I am very pleased to report that I followed your instructions and everything looks GREAT on this end.

     

    No glitching at all. Silky smoothe up and down.

     

    Thanks so much for going the many extra miles.

     

    I can't believe that this was somewhat related to a gradient/will-transform combo. Good grief. 

     

    Thank you thank you thank you!

     

     

     

    • Like 2
  12. Thanks so much for the thorough deep dive. Can't imagine what it was like to track that stuff down.

     

    In case it helps others, i was pleased to learn that CodePen offers the ability to add that meta tag with an easy button.

     

    meta.thumb.png.737d49d9b685e3909355f7c2b0206059.png

     

    I deeply regret to report though that I tried with the meta tag and new beta and although the glitch is by far less frequent, I can still manage to get it to occur. 

     

    I thought it may have only been happening with fast scrolls but fastScrollEnd:true didn't seem to help. 

    I also tried normalizeScroll().

     

    Here is a video of a forked pen with those changes

     

     

    Here is the debug mode version

     

    here is the full editor version

     

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

     

    I appreciate all the help. 

     

     

     

     

  13. Hi and welcome to the GreenSock forums,

     

    Thanks for the demo. ScrollTrigger and pinning can be a challenge to wrap your head around.

     

    If I understand correctly, you don't want the 4th panel (green) to be pinned and the test section should just animate up with it.

     

    If so, I used a condition inside your loop to not create a ScrollTrigger for the last panel. 

     

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

     

    Edit: I removed the 100vh height from .test just to verify that no extra spacing was being added by pinning or whatever. 

    • Like 3
    • Thanks 1
  14. I came up with this setup where the first panel scrolls up to reveal pinned content beneath it

     

    GOOD CODEPEN EMBEDDED AT BOTTOM OF PAGE

     

    Basically once you scroll down the full height of the page the stuff underneath the blue panel gets unpinned and moves up.

     

    I'm not 100% sure it's the best way to approach the html / css but it works and I'm implementing this on a site where I may not have control over all the html.

     

    However, when I add a scrubbed animation to this setup of the word "one" spinning while elements are pinned, Safari totally glitches out when I scroll up the page (making the blue section renter from the top of the viewport).

     

    Notice in the video below the red section completely disappears w and reappears when the scrolling stops.

     

    Open the following demo in debug mode on your device to test.

     

    https://cdpn.io/pen/debug/QWrRoVr

     

    I've tried a few will-change:transform and force3D:true/false things to no avail.

     

    Again the only difference between the good demo posted below and the bad one is that the animation of the word "one" spinning is enabled. I'm seeing the glitch on iOS 15.6.1. On desktop it works fine.

     

    thanks for the help.

     

    Carl

     

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

  15. Sorry, but I really can't go on offering 1 on 1 consulting on your project every time you want to add a new feature and I definitely can't try to dive into css layout issues.

     

    However, I'll offer the following before I go.

     

    Putting code in between lines of timeline code doesn't mean it's going to execute in that position of the timeline.

    tl.to(video3, {opacity: 1})
    
    video3.play() // this runs immediately and is in no way associated with the playback of the timeline.
    
    tl.to("#seq-4", 3, {opacity: 1})

     

    If you want to trigger a video to play or run any external function from a timeline you need to use call().

     

    This is a basic example of 2 videos being triggered from a timeline

     

    See the Pen wvjOKXR?editors=0111 by snorkltv (@snorkltv) on CodePen

     

    Another problem is that your videos have opacity:0 in the css and I don't see you fading them in before you want them to play.

     

    Hopefully this helps get you in the right direction. 

    If you have more GSAP questions please consider a new thread with a minimal demo that clearly illustrates a single issue.

     

    If you want to maximize what you can do with GSAP, I'd strongly suggest spending a month or 2 with training. It could really help you avoid these problems and speed up the learning curve immensely. 

     

    Best,

     

    Carl

     

     

     

    • Like 2
  16. So glad to hear you put in the time and achieved this result on your own!

     

    That's the best way. I know it feels good when things finally work. Sometimes the best way to learn is just to grind it out a bit. 

     

    Between my classes and this forum I've seen very similar questions regarding "i want to animate all these things basically the same way, but the first and/or last should be different. 

     

    The truth is there are many ways to get the same results and some just make more sense to some people than others. Some methods are more concise and some offer more flexibility.

     

    I'll be using this demo below for my lesson this week, but figured I'd share it with you as a little reward for your hard work.

     

    It basically shows a variety of ways to "kind of stagger things".

     

    Best viewed in it's own window

     

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

     

    Congrats on the progress!

     

    • Like 2
  17. thanks for the demo. it's a start.

     

    I think it would be best for you to focus on the animation of only 3 elements and worry about ScrollTrigger later.

     

    Just get 3 elements to fade in and out EXACTLY as you want with 3 tweens.

     

    Don't worry about loops or writing efficient code right now.

     

    In your demo multiple items have the same heading and sub-title text which makes it impossible to tell what is fading in and what is fading out. Definitely change that.

     

    However I noticed the second tween animates to opacity:1

     tl.to("#seq-2", {opacity: 1});

     

    but I don't see that it was ever set to 0 in the css or elsewhere... so it is animating from 1 to 1.

     

    Think of the starting state of each of the 3 headings and write specific tweens for each one.

     

    You started this thread asking to how to animate multiple items in order and I guess we assumed you just wanted them each to do the same thing.

     

    Now you want

    • the first item to start visible and fade out
    • second item to be invisible and then fade in and fade out
    • .... 
    • last item to fade in but not fade out

     

    Hopefully this helps you review your code and adapt those 3 animations.

     

    • Like 2
×