Jump to content

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

ZachSaucier last won the day on October 22

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on October 22

ZachSaucier had the most liked content!

Community Reputation

5,146 Superhero

About ZachSaucier

Profile Information

  • Gender
  • Location
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

6,616 profile views
  1. I see in the network panel of the dev tools that you're loading an old version of GSAP (twice it looks like): http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js?ver=5.5.1 You should load the most recent version once instead https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  2. Ah, I understand what you're saying now @emjay. Something funny is going on there. We'll investigate and get back to you!
  3. Hey Toni and welcome to the GreenSock forums. Those steps sound like the correct ones. Could you share with us a URL that shows the load error? Perhaps we can use the dev tools to figure out what's going wrong. Perhaps your load order is incorrect or something like that.
  4. Hey rmonell and welcome to the GreenSock forums. Notice that the CodePen demo is using a really old version of GSAP. Also notice that it's loading ThrowPropsPlugin, which is the old version of InertiaPlugin. If you make sure to load InertiaPlugin (this uses the trial version) it works: https://codesandbox.io/s/beautiful-cherry-n3e1d?file=/src/index.js
  5. So use a .set() and .to() I'd set it up like this: https://codepen.io/GreenSock/pen/JjKWBgy?editors=0010
  6. It's still throwing some errors when I hover over the texts. Maybe your target(s) are incorrect?
  7. Hey Emjay. This behavior is simply because ScrollTrigger waits a bit after resizing to set things up again (refreshing). Otherwise every single resize event (there are a lot when someone resizes the window like that) it'd start setting things up then have to tear everything down and re-set things up again. That's quite bad for performance. So ScrollTrigger optimizes things by not refreshing as much as the resize event fires (which is a good thing!).
  8. Hey @Dennyno. If you'd like our help debugging please make a minimal demo as this thread describes:
  9. Hey @Shaun Gorneau. There are a few errors in your pen, including an extra semicolon on line 9 that is making the whole demo not function. Maybe you're still working on it or accidentally saved after making some changes?
  10. In that case you should make the overlay the scroller (not the window). That way you don't need to affect the other content on the page at all.
  11. Hey Mike. A couple of notes not related to your question: Why use CSS transitions and setTimeouts instead of using GSAP for the open and close overlay animations? That way you have real callbacks when the animation is done instead of "guessing" with setTimeouts and have more control over your animations. If you do stick with CSS transitions I recommend making use of the transitionend event instead of setTimeouts. You might consider using gsap.set() instead of doing elem.style.property. It's particularly useful when setting multiple properties. To answer your ques
  12. I'd probably set it up this way: https://codepen.io/GreenSock/pen/MWepQaV?editors=0100 In general it's best to avoid inline styles in your HTML when you can.
  13. Hey SuppahSeb. Why do you need the position: fixed and such on the container? Removing those properties fixes the issue.
  14. Additionally to what mikel said, you could get even more fancy and do it all in a "single tween" using GSAP's keyframes functionality if you wanted to: https://codepen.io/GreenSock/pen/PozpEgP?editors=0010