SiDsBiZ
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by SiDsBiZ
-
-
Hello Greensock Team!
If i want to "Intro"-animate an Element (an img tag) the data-speed smooth scrolling is not working anymore. I tried also to animate an Container element with the same result. Is it possible to achieve that? What I also tried is to pause the ScrollSmoother till the intro is finished and then resume but the paused didint work:
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
let smoother = ScrollSmoother.create({
smooth: 1.5, // seconds it takes to "catch up" to native scroll position
effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
smoothTouch: 0.3,
// paused: true
});
let intro = gsap.timeline ({
onComplete: function() {
// smoother.paused = false;
}
});intro.from('.logo',{
duration: 1.5,
ease: "expo.out",
top: -300,
autoAlpha: 0,
});
intro.from('.section-intro img',{
duration: 2.5,
ease: "expo.out",
stagger: 0.3,
y: 1200,
autoAlpha: 0
});
How to Intro-Animate Elements which has SmoothScroller Effect (data-speed)
in GSAP
Posted
The Solution is to intro-animate the inner Element (in this case img) and smoothscroll the outer Element (image-wrap), i did the mistake to make it the other way around. The data-speed Attribute has to be on the Outer Element.