Brittany@Decisely
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Brittany@Decisely
-
-
2 hours ago, ZachSaucier said:
Hey Brittany. Those posts are kind of old (in terms of the short life of ScrollTrigger
). ScrollTrigger now has a built in method for this that makes it easy! It's .matchMedia(). You're going to love it 
Let us know if you have questions about using it and we'll be happy to do our best to help.
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!
-
1
-
-
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.
See the Pen oNxEPdd by abitofbrit (@abitofbrit) on CodePen
-
2 hours ago, ZachSaucier said:
Hey Brittany. Since scrub animation the progress based on 1) the distance to scroll and 2) the start and end times of each tween compared to the timeline's total duration then you can add extra space by adding an empty tween at the end of your timeline. Something like this:
// last "regular" tween .from(".retsol-page-2 .retsol-point", { transformOrigin:'50% 50%', duration: 50, delay: 10, y: '+=300px', autoAlpha: 0, stagger: 20, ease: 'linear', scale: 0.5, }, "<") // new empty tween .to({}, {duration: 2})
To make it go further (scroll wise) change your end value to a larger number
That's such a simple answer - I don't know why I didn't think to do that! haha... Thank you! That worked!
-
1
-
-
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, }, "<");
-
12 minutes ago, David Carrio Ricardo said:
Ohh lord i am very grateful for your help. It`s all as Zach said, but i had a start. top top, end bottom top, and actually couldn`t figure out how to increase the distance.
With this i was able to solve the issue, honestly thanks to both of you.
You can definitely toy around with that end number, and turning on the markers is also super helpful!
-
1
-
-
29 minutes ago, ZachSaucier said:
I'm surprised that the negative sign did what you wanted to. I would think it would be positive to make it longer.
Think of it like absolute or relative positioning (CSS). If I set an element to
position: absoluteand addtop: -150%to the element, it moves the element 150% up the y-axis, and if I were to set it totop: 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. -
3 hours ago, David Carrio Ricardo said:
Hi, let me ask about what in this post is said.
As i understood, there is no way to reduce the speed of all the animations at the same time, and you can only reduce the speed in a relative way, making ones faster than anothers. (Isn`t it?)
I just want to confirm it, because its just what i need.
Thanks for the help.
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
startandendpoints. 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
endpoint: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!
-
1
-
1
-
-
1 hour ago, ZachSaucier said:
Why use jQuery's animate if you're already loading GSAP? Even if you're going to use jQuery's calculations instead of the ones built into JS I wouldn't use jQuery's animate because it's slow and limited in what it can do.
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!
-
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-dotis the equivalent ofnav ain 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); }); });
-
1
-
-
@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.
-
Here:
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.)
-
@ZachSaucier - let me see if I can whip up a CodePen really quick.
-
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?
See the Pen xxZRjeV by abitofbrit (@abitofbrit) on CodePen
-
Sweet! Thanks so much!
I'll try it out.
-
6 minutes ago, ZachSaucier said:
No, I just mean making sure that your tweens inside of a timeline add up to a certain time (like 1 or 10) in this case. That way it's easier conceptualize how much of the scrubbing section that tween is using. It's not required, I just thought it might be helpful.
Gotcha... so just to make sure I'm understanding this time 😅 ...
If I were to keep the total duration of the tweens at 10 (like my example), but instead of 2, 2, 2, 2, and 2, I changed the duration of the first tween to 6 and the other four to 1, the first tween would take up 6/10 of the total duration time, and the other four would each be 1/10 of the duration?
-
@ZachSaucier Thank you! I believe that makes sense. I was having difficulty understanding how the
startandendvariables worked, but your explanation helps a bit! I also turned the markers back on to visually see how the values affect when/where the tweens fire.As far as adding the duration to the timeline - if I'm understanding correctly - I'm assuming you mean using the duration method?
hcSection.duration(10); -
Hey! Suuuuper new to GSAP. 😅
I'm setting up a timeline, and I have ScrollTrigger attached to the scrollbar. There are certain elements on the timeline that I want to slow down their animation 'cause they fly onto the page at the slightest touch of the scroll bar. What property or properties do I need to add or adjust to do this? Here's my code:
** And to add, I've tried changing the duration, delay, and scrub; none of those seem to have had an effect on the time it takes to scroll through an animation.
let hcSection = gsap.timeline({ scrollTrigger: { trigger: "#healthcareHome", pin: true, start: "top top", end: "+=1000", scrub: 2, } }); hcSection.from('#healthcareHome .circle svg', { duration: 2, delay: 0.5, x: '+=200px', y: '100%', scale: 0, autoAlpha: 0, rotation:'360', ease: "power4", }).from(".healthcare-home-text", { duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#healthcareHome .web-browser",{ duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#hcBrowserSVG path, #hcBrowserSVG circle, #hcBrowserSVG g, #hcBrowserSVG text", { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.2, stagger: 0.2, transformOrigin:'50% 50%', }).to('#healthcareHome .row', { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.5, stagger: 0.2, transformOrigin:'50% 50%', });
-
I was having this problem yesterday. It seemed to have been an issue with the
gsap.min.jsfile. I pulled the js from here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js and it started working.
Disable/enable ScrollTrigger based on window.innerWidth and resize
in GSAP
Posted
That totally did the trick. Thank you! Thank you! Thank you!