timeline make page scroll-down a bit

[Gad 2 Likes (Newbie)]

Hi, 

its probably small issue, but whenever I use this tween:

gsap.from('.breadcrumb', { duration: 1, y: 20, opacity: 0 })

 it seems always the y make my page scroll down a bit while this effect happen.

the animation it self working but the issue is with page scroll.

how could I prevent this scroll behavior to the web page.

thanks.

[Gad 2 Likes (Newbie)]

full timeline

 

const productAnimation = gsap.timeline()

    productAnimation.from('.breadcrumb', { duration: 1, y: 20, opacity: 0 })

        .from('.owl-carousel', { duration: 1, y: 20, opacity: 0 },.5)

        .from('.carousal-navigator a', { duration: 1, y: 20, opacity: 0, stagger: .1 },1)

        .from('.product-name', { duration: 1, y: 20, opacity: 0 },1)

        .from('.product-color', { duration: 1, y: 20, opacity: 0 },1.2)

        .from('.price', { duration: 1, y: 20, opacity: 0 },1.4)

        .from('.purchase', { duration: 1, y: 20, opacity: 0 },1.6)

        .from('.options', { duration: 1, y: 20, opacity: 0 },1.8)

        .from('.product-description p', { duration: 1, y: 20, opacity: 0, stagger: .1 },2)

[akapowl 5,140 Likes (Superhero)]

13 minutes ago, Gad said:

it seems always the y make my page scroll down a bit while this effect happen.

 

That sounds to me like you just might need to set overflow to hidden to one of your containers/wrappers to prevent potential overflow that is being created when your breadcrumb is being set to y: 20 (where it is supposed to tween from) from adding to the page's scrollHeight.

 

But it is really hard to tell without seeing things in context of your HTML/CSS.

 

Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

[Gad 2 Likes (Newbie)]

hi , thank you for your reply

 

See the Pen LYQRRzV by Mohamed-Gad (@Mohamed-Gad) on CodePen

 

and after i wrote this codepen , my issue not appear there as you can see but in addition i recorded my problem please check it below:

 

the code used for this one :

 

    const productAnimation = gsap.timeline()

    productAnimation.from('.breadcrumb', { duration: 1, y: 50, opacity: 0 })

 

[Gad 2 Likes (Newbie)]

ok issue fixed, 

i changed the animated div to be the p inside it and it seems now its animated without that page scroll effect behavior.

thank u.

[akapowl 5,140 Likes (Superhero)]

Great that you've got it working! 

 

I was able to reproduce the issue shown in your video from your codepen demo - but very irregularly.

 

In your demo the scrollHeight of the body was definitely still changing (only visible if the .dummy was tall enough to overflow the window - like it is in the previews here) - so if there were still any issues with that regard, you would probably still want to apply a wrapper with hidden overflow to that .dummy in a similar fashion, too.

 

After doing that I couldn't reproduce the jump of scrollPosition on load anymore at all.

 

See the Pen KKQgNpY by akapowl (@akapowl) on CodePen