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. I'm not really sure I follow the question. If the element is already past the start trigger, it's going to play. It sounds like maybe you want a different ScrollTrigger for desktop and mobile? 


    Have you seen the .matchMedia() method?



    Or, if you want something to wait, you can always use a delayedCall.



    Does that help? Or maybe I'm missing the objective altogether. 


    Happy tweening.



    • Like 2
  2. Hi @fcdobbs :)


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


    It's almost always easier to use CSS variables rather then the CSSRuleplugin. Here's a fork with that change. 


    See the Pen 439cdf2bdddcefdfd533e9c2a852747b by PointC (@PointC) on CodePen


    You'd also want to avoid any CSS transitions on elements that will be animated with GSAP so you don't cause any conflicts.


    Happy tweening and welcome aboard.


    • Like 3
  3. 5 hours ago, Vivodionisio said:

    Now the reverse animation is behaving more like a repeat... I don't suppose you can see what's causing that?

    Yep - looks like you've gone back to the original way of creating a new timeline on each mouseenter event. You'll want to create one timeline for each button and play/reverse on enter/leave.


    See the Pen 97b85ae7f0116ee69975b94071d17e76 by PointC (@PointC) on CodePen


    I think you were trying to create the buttons like that again because your bounding client rect values were off as the motionPath animation hadn't completed yet. That's why I moved your button creation into a function and called it when the motion path animations are done. Jut my two cents, but you probably wouldn't really need to use the boundingClientRect() if you just wrapped each button and paragraph into a little div, grid or flex wrapper of some sort.


    Happy tweening.


    • Like 2
  4. I assume you mean all the black tiles in sequence and then all the white tiles in sequence, correct? If so, you can put them on a timeline. Something like this should work. Note: I used a shorter duration and pause just so you can quickly see what's happening.


    See the Pen 4d48b882af5b14f2b2ea0f8b91b59df3 by PointC (@PointC) on CodePen


    Is that what you needed?


    Happy tweening.



    • Like 2
  5. Yes, you can use nth-child selectors like that in tweens. If you prefer, you can assign them to an array variable before tweening as well. It's entirely up to you. 


    I used a repeatDelay inside the stagger object because I understood that to be the goal. Each target would yoyo repeat with that delay before the next one animates. The dur variable has the pause added to it so there is an extra 2 seconds before the next element animates as well.


    15 minutes ago, VahanBio said:

    why you gave a negative `repeat` outside the stagger

    The -1 infinite repeat is for the whole timeline. You had a -1 repeat as a default in your original demo so I wasn't sure if that was the goal or not. It's not necessary at all to make this work.


    More info about stagger:



    Happy tweening.





    • Like 3
  6. I'm not 100% sure as I didn't build that demo, but all the sections are stacked on top of each other so this may be a target/z-index issue. If you add the .ignore class to the header, you see it is indeed ignored.


    Here's another simple example where I've told the Observer to ignore the .green and .orange targets.

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


    You can see that the ignore works exactly as expected. I didn't have much time to dive too deep into your forked demo to see the exact reason, but maybe @GreenSock can clarify a little bit.


    Happy tweening.


    • Like 1
  7. hmmm.. looks like you edited your post to include a list of scripts.


    27 minutes ago, Daniyarkz said:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>

    <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>


    Yeah - definitely remove those TweenMax files and make sure to use the latest GSAP (3.10.4). I'd also suggest using ScrollTrigger instead of ScrollMagic. I'm not sure why you're loading both.

    • Like 2
  8. Kinda sounds like the animated elements may not be loaded and ready. Are you loading your scripts at the bottom of the page? If not, are you using a load and/or DOMContentLoaded event listener? Make sure custom JS is being loaded after the GSAP scripts. Check the console for errors.


    You mentioned TweenMax, but you are using the latest versions of GSAP and all plugins, correct? 


    That's about all I can think of without seeing the actual problem. 


    Good luck.

    • Like 1
  9. Your second forEach loop is also adding a mouseenter, but I think you meant to use mouseleave. Just making that change won't work though because you're creating a new timeline on each enter/leave event. You'd probably want to create the timelines and listeners in one loop and then play/reverse on enter/leave. Something like this.


    See the Pen 1a5ddca48c06989a4f5bb5b33f1f8ddf by PointC (@PointC) on CodePen


    Happy tweening.



    PS I also switched your variable declaration to use the GSAP utils.toArray method rather than the spread operator and a nodelist. Not that what you did was wrong. I just didn't know if you knew about the utility method.

    • Like 3
  10. x/y are better than top/left. You can use the GSAP shorthand like y:-500.


    I'm not sure I follow your reset question.

    The element animates into view on page load. (no problem)

    A button sends the element back out of view. (no problem)

    After it animates out of view it resets. How does it start again? Another button click? The same button that made it exit?


    If you have a revised demo, that would be great.


    Happy tweening.




    • Like 2