Jump to content

ZachSaucier last won the day on June 30 2019

ZachSaucier had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on June 30 2019

ZachSaucier had the most liked content!


467 Leader

About ZachSaucier

Contact Methods

Profile Information

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

Recent Profile Visitors

2,904 profile views
  1. ZachSaucier


  2. https://codepen.io/GreenSock/pen/OJyPmgX
  3. When a web page loads, it tries to display the content as soon as possible. Usually it does this by loading the elements into the DOM and styling them with your CSS and then rendering. But what if some of your initial styles are set with JavaScript, particularly a JavaScript animation? We can fix this flash of unstyled content (FOUC) visual bug by applying visibility: hidden; to our elements and then use GSAP's autoAlpha property to animate in our content once JavaScript has detected that the page has loaded. autoAlpha affects our element's opacity and visibility, changing it to visible when the opacity is greater than 0. To understand this more deeply, check out this video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3. Watch the video
  4. Hey vanSk, You should be able to do this by adding a delay after the staggerFromTo that you're using there, then adding another animate to the timeline to show the button, and then it will loop indefinitely since you set the repeat to -1 on the timeline. Is there a particular part of the process that you're running into trouble doing?
  5. The distance per scroll is set by the easing in the timeline. So if you want a consistent scroll distance no matter where it is scrolling, remove the easing like so: var action = new TimelineMax({paused:true}) .to('.wrapper',1,{y:-wrapperHeight, ease: Power0.easeNone}); The other tween is tweening to a particular progress, so you can change the ease based on up or down if you'd like, as mikel showed. https://codepen.io/GreenSock/pen/MWgyrME?editors=0010
  6. If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); You can change the ease to whatever you'd like. Mikel was demonstrating that you can have a different ease for scrolling up and down if you'd like to.
  7. I understand that it doesn't currently work in the latest version of GSAP. I said it should work For some reason when GSAP converts the transforms to what should be an equivalent matrix, it doesn't fix the issue in Chrome. Maybe @GreenSock can give us more info on that. The good news is that in the next version of GSAP, matrices are no longer created for transforms, so the above code would fix the bug. In your project it might be best to use an onComplete for the .to() in order to set the transform to the working one in my last post. https://codepen.io/GreenSock/pen/VwZajqQ?editors=0010 Alternatively, you could animate this one piece in non-GSAP code for now (at least until the next version of GSAP comes out).
  8. Thanks for the demo! This boils down to a miscalculation in Chrome. In Firefox is looks great, as it does at a scale of 0.5 in Chrome (for me at least). The trick is to work around this bug is to set the perspective to something slightly different (like 999px compared to the default of 1000px). You should be able to do that in GSAP using the transformPerspective property, but the below doesn't seem to work in this case (but setting the transform manually to transform: perspective(999px) scale(0.786); works just fine). resizeTimeline.to('#ani-holder', 0, {transformPerspective: "999px", scale: 0.786, transformOrigin: "50% 50%"}); Setting perspective: 999px; on the parent doesn't seem to fix it either. Chrome be weird. I've asked Jack to look into it. So far he said "Hm, never seen that before"
  9. Hello Forrest and welcome to the forums! As Blake said, you've stumbled upon an edge case of browsers. You can use a different variable name or just use a string like ".top" to work around this issue. Happy tweening.
  10. Hey Roddy, Can you please create a minimal example of the behavior that you're talking about? From what it sounds it doesn't seem to be related to GSAP, but it would really help us figure out exactly what's going on.
  11. Hey graphsynergie and welcome to the forums, Neither of your examples seem to make use of GSAP. With that being said, Blake here on the forums has an infamous thread about smooth scrolling that you can check out if you want to learn more about how to implement smooth scrolling with GSAP.
  12. It was working in Chrome when I moved the script on the live page that you had shared previously. So no, no ideas why that may be the case. Maybe you can share a live version of the page again so we can look?
  13. Hey lasiyo and welcome. I'm not quite sure why you decided to delete the elements that said Hello Monday on your screen capture. The live reference for others: https://www.hellomonday.com/home Anyway, for the full screen scrolling navigation I'd recommend looking at Craig's method in this thread: For the parallax effect on mouse move I'd recommend the below thread but there are some others you can search for if it's not sufficient.
  14. Interesting that DrawSVGPlugin.getPosition() isn't in the docs... We'll have to fix that in the next version.