Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About Brittany@Decisely

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. That totally did the trick. Thank you! Thank you! Thank you!
  2. Perfect. I'll look into it! And yeah, the old posts are what I could find, so I was trying to adapt the new stuff with the old. Thanks again!
  3. I'm trying to conditionally disable ScrollTrigger on mobile, and I've read a handful of posts on this - .from Kill, Invalidate Tween on Resize (for Mobile) How to Kill and reset a ScrollTrigger Timeline GSAP / TweenMax disable desktop animation on mobile and vise versa and also reset on resize But I haven't had luck getting these things to work across the board on all browsers... especially Firefox. In the CodePen, I put a few things that I've tried (commented out) - .kill(), clearProps: true, .play()/.pause()... and every combination in between.
  4. That's such a simple answer - I don't know why I didn't think to do that! haha... Thank you! That worked!
  5. I'm using ScrollTrigger, and I was wondering how I could go about adding a "pause" at the end of each of my timelines. After the last tween plays out, I just want to add a second or two at the end of the timeline before it scrolls on to the next part of the website. Below is an example of one of my timelines, but I'm looking to do this with all of them on my site. Thanks in advance! let retPageTwo = gsap.timeline({ scrollTrigger: { trigger: "#retsolPage2", pin: true, start: "top top", end: "bottom -200%", scrub: true, } }); ret
  6. You can definitely toy around with that end number, and turning on the markers is also super helpful!
  7. Think of it like absolute or relative positioning (CSS). If I set an element to position: absolute and add top: -150% to the element, it moves the element 150% up the y-axis, and if I were to set it to top: 150%, it pushes the element 150% down the y-axis. Essentially, when setting the end point to "bottom top", you're saying "bottom 0%"... if that makes sense. lol... So by putting "bottom -150%", it's saying when the bottom goes 150% up past the top of the scroller (the animation won't end until the bottom is 150% up past the top, so you're extending it 150%), and if I were to put "bottom 15
  8. Not gonna lie, this took me a hot minute to figure out myself. As Zach said, you need to make the scroll distance longer, and to do that, you adjust your timeline start and end points. For example, this timeline's length is based on the height of the trigger element (from the top to the bottom): let example = gsap.timeline({ scrollTrigger: { trigger: "#example", pin: true, start: "top top", // When the top of the trigger reaches the top of the viewport end: "bottom top", // When the bottom of the trigger reaches the top of the scroller scrub: true
  9. The calculations are the same; I just couldn't get the ScrollTo plugin to cooperate. It kept scrolling to the end of the container and snapping me back to the top of the container. I'll take another look at it today to see if I can get it to work. I'll keep you posted!
  10. Just to follow up: for whatever reason, I couldn't get it to work. Included the ScrollTo plugin, and it kept going to the end of the section, completing the timeline, then snapping back to the top of the section. This isn't specifically GSAP, but I rewrote what you gave me in jQuery and made it into a function that refreshes on window resize. This got it working, but I definitely appreciate you pointing me in the right direction! (PS: a.p-nav-dot is the equivalent of nav a in the project I'm working on) $("a.p-nav-dot").each(function(i){ var clickElem = $(this).attr('
  11. @ZachSaucier - You are awesome! Thank you! I'm still learning the ins-and-outs of GSAP, so I'll need to familiarize myself a little more with the properties and methods.
  12. Here: https://codepen.io/abitofbrit/pen/xxZRjeV You'll see that if you click on the anchor links at the top, it takes you to the top of the container, which is the "top"/start of the timeline. Because the timeline is attached to the scrollbar, the user will then have to scroll down to see the timeline play out - which isn't necessarily intuitive... so I'm wondering if there's a way to have it link to the end of the timeline for that section. (To note: the only exception to the rule is if the anchor takes you up to a section instead of down to a section.)
  13. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the sc