Jump to content

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

OSUblake last won the day on October 23

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. It would probably make it a lot easier if you draw everything at 0 and then set the position. Test Animacja (codepen.io)
  2. Hi Doxx, Your ScrollTrigger should be part of the timeline. Other stuff I noticed is that it's best to use numbers for numbers, not strings. For percentage transforms, you can use xPercent/yPercent instead. And cubic-bezier isn't a gsap ease. You can use use CustomEase for that. CustomEase.create("custom", "0.165, 0.84, 0.44, 1") This should help you get started. Staggering Lines Test (codepen.io)
  3. Welcome to the forums @dtpmike2 You probably shouldn't be using onUpdate for something like that. Just make an animation on your timeline that moves it. It will probably help if you focus on your animations first without using ScrollTrigger or any other 3rd party libraries like smooth scrollbar first. Once your animation works the way want, then add in all the scrolling stuff. GSAP Starter Template (codepen.io)
  4. Welcome to the forums @liow You need to use immediateRender on your 2nd tween. Otherwise it would be animating from black to black. GSAP + ScrollTrigger (scrub) Change text color (codepen.io) You can learn more about immediateRender here.
  5. Kind of like this... Inserting content (codepen.io)
  6. You would append it. Using insertAdjacentHTML is just going to duplicate it.
  7. Your newItems don't look like they would be the same as the ones your inserting. Maybe try parsing first, then append what you've parsed.
  8. Yes, targeting an object is much more complicated, and can't be done directly. Inline is definitely the way to go. Best way is to test it out and see for yourself. SVG line example (codepen.io)
  9. The issue is the arrow function. The same goes for using let. IE is forever stuck using an older version of JavaScript. Most people use babel to do the conversion, or they don't even worry about IE because it's a waste of time as Microsoft doesn't even support it. var mobile_menu = gsap.timeline({ scrollTrigger: { trigger: "#site_content", toggleActions: "play none none none", start: "top top", end: "bottom bottom", onUpdate: function(self) { if(self.direction == -1){ mobile_menu.reverse(); } else if (self.direction == 1){ mobile_menu.play(); } } } });
  10. No worries. Knowing that suppress events would work isn't obvious unless you've done a lot of work with GSAP.
  11. Setting the progress to 0 is causing it to fire, by you can prevent that by passing in true. https://greensock.com/docs/v3/GSAP/Timeline/progress() tl.reversed(false).progress(0, true).clear();
  12. So if you only want it to run once, you could something like this. ScrollTrigger.addEventListener("refresh", myCallback); function myCallback() { ScrollTrigger.removeEventListener("refresh", myCallback); ... }
  13. You listen for some of ScrollTrigger's events... https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()
  14. Are you looking for the onLeave callback?
  15. Welcome to the forums @Artleks Generally, it's not a good idea to try and reverse something added to a timeline. I think you may have been on the right track with tweenTo, just the incorrect syntax. https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() So you wouldn't add the child to the parent. Just the tweenTo. const child = gsap.timeline({ paused: true }) parent.add(child.tweenTo(1)) ... parent.add(child.tweenTo(0))
  16. Your GSAP animations are using the CSSPlugin. That's what allows you to animate CSS properties like the background color. Are you trying hover items that are being animated with your current code, like the circle, square and triangle?
  17. Can't you use the same CSS and apply it to elementor? I'm not familiar elementor, so it's really hard to say how to go about implementing that. Maybe someone else that has experience with it will chime in.
  18. It's fine, or you can just use a fromTo animation. Just another note. Timelines don't have eases, and you don't need to pause an animation if it's reversed.
  19. Hmmm... in that case it might be better to use onToggle kind of like this. Or maybe just onEnter. ScrollTrigger color change (codepen.io)
  20. We can't fork your pens because they are private, but here's how I do media queries. Media Query Watcher (codepen.io)
  21. If you're using GSAP, there's already a request animation frame (rAF) loop running, i.e. gsap.ticker, so there's no point in creating an additional rAF loop. And if you run your own rAF loop, there's a small possibility that it might not be in sync with GSAP. It could a frame behind or ahead. ScrollTrigger listeners will be synced with when ScrollTrigger refreshes, like on a window resize. ScrollTrigger automatically debounces resizes so you don't have to write your own timeout calls. More information about the listeners can be found here. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()
  22. Have you checked out the ScrollTrigger demos? There's a lot of examples to learn from. https://greensock.com/st-demos/
  23. You would use totalDuration instead of duration. I only added yoyo and repeat to that demo so people could see it play again because it was so short.
  24. You would need to change the scrollTop to scrollLeft in the scrollerProxy and set horizontal: true on your scroll triggers.
  25. Do you mean actual scrolling on the x axis? If so, you would need to provide the scrollLeft getter/setter to the scrollerProxy. However, I would be careful implementing horizontal scrolling as it won't work with a mouse wheel. Most people do a fake horizontal scroll, where you animate a container on the x-axis using the normal scroll direction. https://codepen.io/GreenSock/pen/YzygYvM