Jump to content
Search Community

Brittany@Decisely

Business

  • Posts

    19

  • Joined

  • Last visited

About Brittany@Decisely

Recent Profile Visitors

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

Brittany@Decisely's Achievements

7

Reputation

  1. Brittany@Decisely
    That totally did the trick. Thank you! Thank you! Thank you!
  2. Brittany@Decisely
    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. Brittany@Decisely
    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. I know, realistically, people aren't going to be resizing their browser 50 times like I am with testing, but I don't want the site to break on them if they do.
  4. Brittany@Decisely
    That's such a simple answer - I don't know why I didn't think to do that! haha... Thank you! That worked!
  5. Brittany@Decisely
    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, } }); retPageTwo.from(".retsol-page-2 .retsol-home-text-2 h2", { duration: 30, delay: 10, scale: 1.5, ease: 'linear', color: '#222222', transformOrigin:'50% 50%', y: '+=-65px', }).to("#retsolPage2 .web-browser-2", { duration: 20, delay: 10, ease: 'linear', transformOrigin:'50% 50%', y: '+=-20%', autoAlpha: 1, }, ">3").from(".retsol-page-2 .retsol-point", { transformOrigin:'50% 50%', duration: 50, delay: 10, y: '+=300px', autoAlpha: 0, stagger: 20, ease: 'linear', scale: 0.5, }, "<");
  6. Brittany@Decisely
    You can definitely toy around with that end number, and turning on the markers is also super helpful!
  7. Brittany@Decisely
    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 150%", the animation would end when the bottom of the trigger is 150% down below the scroller.
  8. Brittany@Decisely
    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, toggleActions:"restart complete reverse reset", } }); To make this timeline longer, I adjusted the end point: 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 -150%", // When the bottom of the trigger goes 150% past the top of the scroller scrub: true, toggleActions:"restart complete reverse reset", } }); By adjusting it to -150%, I just extended the timeline by 150%, so now when I adjust my durations for each tween, the length of the timeline will be based on the height of the the trigger element + 150%. ... This is how I did it, and it's worked for me, but Zach, feel free to correct me if I'm wrong!
  9. Brittany@Decisely
    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. Brittany@Decisely
    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('href'); var offset = $(clickElem).offset(); var oHeight = $(clickElem).outerHeight(); $(this).on("click", function(){ $('html,body').animate({ scrollTop: offset.top + oHeight * (i + 1), }, 1000); }); });
  11. Brittany@Decisely
    @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. Brittany@Decisely
    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. Brittany@Decisely
    @ZachSaucier - let me see if I can whip up a CodePen really quick.
  14. Brittany@Decisely
    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 scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  15. Brittany@Decisely
    Sweet! Thanks so much! I'll try it out.
×
×
  • Create New...