Jump to content

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

ZachSaucier last won the day on June 30 2019

ZachSaucier had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  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.
  15. Oops, I forgot to set the top and left of the elements. I updated the above demo to set them. You don't have to switch your positioning away from flex. One tricky thing: you need to set the position to absolute in a second .each loop because otherwise the elements after the first will be mispositioned. Keep in mind that if a user resizes the page the original position of these elements will likely not be what you want. You need to handle resize logic if you want it to be very responsive. Also keep in mind that anything that comes after these buttons will likely shift up on page load because of the position: absolute. You might want to compensate for that somehow (maybe a set height or set margin-bottom). Happy tweening
  16. Technically the x:0, y:0 is just assuring that there is no other offset - the left:p.left, top:p.top is the part that assigns where in the target the element should be positioned. The reason why it's not working in the demo above (in fact, the tween inside of the dragEnd is effectively doing nothing) is because you failed to assign position: absolute to the draggable elements. I'd recommend putting that style declaration inside of the .each function so that you can position them however you'd like before making them have position: absolute. https://codepen.io/GreenSock/pen/abodYaW?editors=0010
  17. Similar to what Pedro said, I can't reproduce any weird jumping on my Android. All I see is some built in zooming for the input which, if someone zooms out again, makes them have to scroll to the inputs again. Is this what you're talking about @ericnguyen23? Maybe you could take a screen capture of the effect that you're seeing?
  18. It's caused by one of the classes given on dragEnd not being removed in the case where the element is dragged from one box directly to the other. One way you could fix it is by removing that class on drag start: onDragStart:function(e) { e.target.targetAttachedTo.removeClass("occupied"); }, https://codepen.io/GreenSock/pen/YzKweeW?editors=0010
  19. As pointed out by PointC, the issue is that the script is trying to run before the DOM content that it's looking for is loaded. If you need to keep the script in the head and can't move it to the bottom of the body, you should use the following instead: document.addEventListener("DOMContentLoaded", function(event) { // Your timeline code });
  20. Can you please host a live webpage that we are able to see that can reproduce your issue? Otherwise I'm afraid we can't really be of much more help.
  21. Hey alguna and welcome to the forums, One way to do that would be to create an object that maps the ID to the timeline like so: const map = { "tl_A": tl_A, "tl_B": tl_B, "tl_C": tl_C } and in your click listener you use the map to fire the right timeline: map[triggerId].restart(); https://codepen.io/GreenSock/pen/pozgWRK?editors=0010
  22. Hey alostdeveloper and welcome to the forums. This is likely due to a loading issue of your assets but without seeing a live page it's very hard for us to help you figure out what's going wrong. Have you tried looking at your browser's console? Usually it will tell you if something is not loading or if you have a different error with your code.
  23. Your approach would only work if the images are loaded before the intersection occurs. In the case that the intersection occurs and the images aren't loaded, there is no logic to tell the browser to check again later if the images have loaded since the intersection. So if a user scrolled down to where the images should show but they're not loaded, they would never show (unless they scroll again and the intersection observer event fired again after the images had loaded). That's why you've got to use an approach more similar to the one I outlined above. We were all newbies at some point! No reason to be sorry.
  24. Hey grensesnitt and welcome, Why do you need to use MorphSVG for this? If you're just animating the stroke-width you can do that without MorphSVG with just a regular <circle> as mikel said. Anyway, I'm not sure why your SVGs are morphing in this way. Maybe another moderator will come around and be able to help more specifically. I do know that we have this handy video that may help you fix some potential other issues with your MorphSVG.