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 @Tedev :)


    Welcome to the forum.


    I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.



    1. Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway.
    2. Switch the order of the tweens 
    3. Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.


    Here's a fork with #2.

    See the Pen 40f3539166669a535bddf0860dc34ace by PointC (@PointC) on CodePen


    Happy tweening and welcome aboard.



    • Like 3
  2. Jack beat me to it, but yeah - those sets are firing at the same time. They may not seem like it since you have that 0.3 delay on the timeline and some other position parameters on the timeline with all the sets. 


    As far as flicker goes, I didn't see any. 🤷‍♂️


    Good luck.



    • Like 2
  3. hmmm... I'm not familiar with Drupal at all. If you can reproduce it in a CodePen, I'm sure we can help.


    You're using the latest versions of GSAP and ScrollTrigger, correct?


    I'd try removing one of the media queries from the three you're using just to see if one is the culprit. (typo or otherwise). 

    • Like 1
  4. Hi @nicoleanowa :)


    Welcome to the forum.


    My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking.


    See the Pen 473a8aa94e4274966c383d83bbd3646f by PointC (@PointC) on CodePen


    Hopefully that helps. Happy tweening and welcome aboard.



    • Like 3
    • Thanks 1
  5. I think you need to make this change on line 38

    // switch this
    var tl = gsap.timeline({paused: true, duration: 1});
    //to this
    var tl = gsap.timeline({ paused: true, defaults: { duration: 1 } });

    Hopefully that helps.


    • Like 2
  6. I'd echo Jack and Cassie's thoughts from above.


    Definitely a nice idea @Eunomiac, but I wouldn't want to see a bunch of unanswered logic questions. There are active community members answering questions around here, but by and large, most are answered by Admins/Mods so I'm not sure many people would jump on the 3rd party, logic type questions. Most of us on the GSAP team wouldn't really have time either. That's pretty much the main problem. We're all trying to get all the GSAP related questions answered so diving deep into other code is a bit of a stretch. Most of the Mods are volunteers and have full-time jobs too so it's a balancing act.


    2 hours ago, Cassie said:

    See if you can give a go at answering some unanswered questions here in the forums.

    That's some of the best advice you can get. Helping others is how I learned GSAP and probably 50%+ of what I know about vanilla JS. You'd be amazed how much you'll learn just by answering some questions. You might make a few mistakes (I made many), but that's how we learn.


    All the best and happy tweening to everyone.



    • Like 3
  7. Sure, you can start from a central point. For that you'd want to animate the cx/cy attributes of each circle. I just hard coded the values in my fork, but there are other ways to get the correct position too. Here's a fork with that update.


    See the Pen 524ac72daf0762b035d3f47cccc5d427 by PointC (@PointC) on CodePen


    A couple other notes.

    I added all the tweens to a timeline. That way you don't need the delay on any of them and the bowl fade-in will happen after the marbles finish their animation.

    The opacity tween isn't doing anything here. When you use a from tween, that is saying "hey, animate from this position/opacity to my current position/ opacity". Since the opacity is already 1, from 1 → 1 won't actually show anything. I changed it to from 0 in my fork so you could see the difference.


    Hopefully that helps. Happy tweening.


    • Like 2
  8. Just to clarify. I don't want to discourage you from trying wild and crazy things. Go for it. :)


    I've just seen a lot of people try complicated animations right out of the gate and then get frustrated when things don't 'click' and abandon GSAP altogether. We want to encourage everyone in the community to stick with it and we're here to help with any and all GSAP related questions and problems.


    Happy tweening.


    • Like 1