Jump to content
GreenSock

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

GreenSock last won the day on April 20

GreenSock had the most liked content!

GreenSock

Administrators
  • Content Count

    16,386
  • Joined

  • Last visited

  • Days Won

    551

GreenSock last won the day on April 20

GreenSock had the most liked content!

Community Reputation

13,469 Superhero

About GreenSock

  • Rank
    Administrator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

59,211 profile views
  1. Have you tried this?: start: () => `top+=${containerRef.offsetHeight} bottom`, end: () => `+=${containerRef.offsetHeight}`, If you're still having trouble, it'd significantly improve your chances of getting a solid answer if you can provide a minimal demo. Oh, and I imagine you'd want your tween's "y" value to be function-based too so that it changes when you resize: y: () => -containerRef.offsetHeight, Happy tweening!
  2. Have you poked around the demos section? Perhaps you can find some inspiration there. Here's what I imagine you were looking for, or at least it'll serve as a jumping-off point: https://codepen.io/GreenSock/pen/GRrwQRB?editors=0010 Here's a different concept (probably not what you're looking for, but I figured I'd drop it in here anyway): https://codepen.io/GreenSock/pen/rNOebyo Happy tweening!
  3. Yeah, an <img> or whatever that's having its x/y transforms animated. Not with CSS, with GSAP.
  4. I think there may be a misunderstanding of the logic though. An animation's playhead is typically controlled by its parent timeline's playhead progressing. This is part of the reason why it's not usually a good idea to nest ScrollTrigger-controlled animations inside of a timeline; it creates a scenario where the same animation is trying to be controlled by BOTH its parent timeline AND the ScrollTrigger (particularly if scrub is set). Like...if the parent playhead is moving forward, but the user scrolls backward...what's the child animation supposed to do? That's what I tried to
  5. Sure, that should be pretty doable. You may even be able to use CSS snapping. https://codepen.io/GreenSock/pen/YzyaKrq By the way, your original drawing reminded me of this CodePen too: https://codepen.io/GreenSock/pen/eYpOZvX?editors=0010 Good luck!
  6. Welcome to the community, @Popique! From a user's perspective, this sounds like a really annoying experience unless I'm misunderstanding something. So I'd arrive on the page and see the scrollbar which indicates I have a long way to scroll, but after I go a certain distance it suddenly stops me from scrolling and makes the scrollbar disappear? Then I have to click a button to get the scrollbar back and continue? Am I understanding that correctly? And what happens when I scroll back up? I can go as far as I want? But then on the way back down I keep getting stopped?
  7. We'd love to help with any GSAP-specific questions, but your demo has over 1,000 lines of code (HTML/CSS/JS) and there's just a lot going on. Plus we don't have the resources to do build-to-order solutions like "tell me how to make a slider exactly like this video". A few tips: I noticed you're using some CSS transitions. Be very careful about those. It's usually best to use GSAP for everything. Definitely don't use CSS transitions on the same elements/properties that you're controlling with GSAP because CSS transitions basically tell the browser to ignore the JS-based chan
  8. I see several problems with that approach: You're adding a new child tween into that waveAnim (which I assume is a timeline?)...inside an onLeave...in which you're actually killing that ScrollTrigger (and the associated animation). Basically it's suicide You're making one of the most common ScrollTrigger mistakes of having ScrollTriggers on child tweens: What if you just put it in a container <div> or something, so you've got your intro animation separated (affecting the inner content), and the ScrollTrigger controls the container. Perhaps I'm misunderstanding your goa
  9. Glad you got it working - sorry, I mistyped that second offset. The way I had it caused the label to be directly on top of the 2nd .set() call because labels don't take up any "space" in the timeline. I fixed that now. .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu', "+=0.001") .set('#navigation', {'pointerEvents':'none'}, "+=0.002")
  10. @Christopher Evans yeah, @Visual-Q is correct about the docs. Also, you never need to use TimelineLite, TweenLite, TweenMax or TimelineMax because in GSAP 3 they were all consolidated into a simple "gsap" object. See If you want to turn off the lagSmoothing feature, you can simply gsap.ticker.lagSmoothing(false) Does that help? Side note: the ticker is NOT the same thing as the global timeline. It's what tells the global timeline to update, typically 60 times per second.
  11. Welcome aboard, Murray! I think you're gonna grow to love the tools more and more as you learn what you can do with them. I'd strongly recommend heading over to the ScrollTrigger demos page: https://greensock.com/st-demos/ It visually shows you a bunch of demos, and you can click to see the CodePens. Your demo looks similar to this: https://codepen.io/GreenSock/pen/YzygYvM Does that help? Sounds great. Perhaps your story would unfold in a similar way as @PointC's did: We love it when the community helps each other a
  12. Yep. Think of it like an external tween that's literally animating the playhead of that heroTl timeline! So we're using GSAP to animate GSAP. 👍
  13. I think it's because you've got it set to "cover" and then you're trying to use percentages which will always match up anyway. Here's an excerpt from MDN docs: So maybe you'd want to switch to px or something. I'd personally avoid background-image animation because from my understanding, it's not accelerated and some browsers apply pixel snapping which means it can look jerky. Instead, I'd put an actual image behind there and use transforms to move it around. But that's just me Are you saying that when you scroll down on a tablet, it doesn't work? Or are y
  14. That's totally doable with GSAP/ScrollTrigger. I don't really have time to build it for you, but here are some tips: Avoid CSS transitions. Use GSAP. You'll typically get much cleaner results. The content on the left should just scroll normally in the flow of the page - the right side element should be pinned using ScrollTrigger. The "scroller" would be the default (the body/viewport). No need to set it. When you set the transformOrigin with GSAP, it applies it immediately (doesn't animate it) because that's almost always what people want. I wouldn't recommend trying to ani
  15. From my cursory glance, here's your problem: .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) You've got two set() calls at EXACTLY the same spot on the timeline. There's literally no space whatsoever between them, so when you tween to that label, it lands on top of both, and the latter one "wins" (in the forward direction, though it's opposite if you're going backwards). One solution would be to just add some space between them, even if it's like 0.001 seconds (imperceptible) .set('#navigation',
×