Laurence
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Laurence
-
-
How do I start my animation
opacity from o to 1
immediately when user is scrolling down to the next section? Here in this code. The animation is using percentage of the opacity.Would like to achieve a behavior wherein when a user is scrolling at the end of the pinned section. It will
Fadeout
the previous section and thenFadein
the next section.Is this achievable? If so, what's the best option to modify the code I've given?
Sorry, quite new to GSAP plugin and still learning the functionalities.
See the Pen bGxNbza by laurence-albano (@laurence-albano) on CodePen
- 1
-
Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections.
I tried using this code function:
function setSection(newSection) { if (newSection !== currentSection) { var tl = gsap.timeline(); tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 }); tl.to(currentSection, { autoAlpha: 0, duration: 0.5 }); var tl = gsap.timeline(); tl.to(newSection, { autoAlpha: 1, duration: 0.5 }); tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 }); currentSection = newSection; } }
and set it to
gsap.to(sections, {});
function like this:gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".container").offsetWidth }, onToggle: (self) => self.isActive && setSection(sections) });
However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.
See the Pen VwBOjKR by laurence-albano (@laurence-albano) on CodePen
-
Wow! Thanks! Didn't know it was possible.
One more thing, how do we get rid of the
pin-spacer
extra height/padding when scrolling down? I can see that there's a lot of extra spacing when you scroll up/down before proceeding to another section.I have reference this, it says to hardwire it on update function. I have tried several methods and can't seem to get it to work onUpdate function on my end..
-
6 minutes ago, Laurence said:
I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation from start to end once it enters the section. So when it enters the pinned element, it should play the whole animation, not by every page scroll.
A good reference is in here to better understand what will be the output
> https://squareup.com/us/en/why-square under `Look and feel like a pro` section.
Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this. -
I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation from start to end once it enters the section. So when it enters the pinned element, it should play the whole animation, not by every page scroll.
A good reference is in here to better understand what will be the output
> https://squareup.com/us/en/why-square under `Look and feel like a pro` section.
Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this.See the Pen jOxVMYy by laurence-albano (@laurence-albano) on CodePen
How to move text elements from bottom to top > ScrollTrigger
in GSAP
Posted
Hi, I'm trying to achieve the animation for this like in this site . (Can scroll down to this section )
Basically I want to move the text from bottom to top and vice versa. How do I achieve this kind of functionality for each of my
.txt-box
inside the.panel
parent element?See the Pen QWVZVrV by laurence-albano (@laurence-albano) on CodePen