[animation scrolling back to the top of the. page]

1 minute ago, mvaneijgen said:

Weird indeed, weirdly it does not happing on the codepen version, so it is something else that is interfering. I would try and disabling some code until you've found the culprit. I can't think of anything that GSAP does that would do this. 

thanks man appreciate your help

[animation scrolling back to the top of the. page]

7 minutes ago, mvaneijgen said:

Still don't see it happen, tested both on Safari and Chrome.

I'll  send a video: https://mega.nz/file/Gg9xSaID#GDat5mFfiWJfnVpFZK-4b4faEl3yZTOWJrLsrdPmmOM

 

[animation scrolling back to the top of the. page]

Just now, mvaneijgen said:

Still don't see it happen, tested both on Safari and Chrome.

did you test it on mobile or in dev. console?, it only happens on mobile devices

[animation scrolling back to the top of the. page]

3 minutes ago, mvaneijgen said:

 

Are you saying that it should animate to the top of the page? Eg you want that to happen, but you don't know how? Or that it is happing and you don't want that to happen?

 

I don't see it happen, nor on your live site. 

 

If you want it to happen, take a look at the ScrollToPlugin https://greensock.com/docs/v3/Plugins/ScrollToPlugin 

thamkyou for responding, I had a past deployment online, now I re-deployed and the problem should manifest, I don't want the page to scroll back at the top, mabye this has something to do with the position attribute of the elements?

[animation scrolling back to the top of the. page]

hi guys I made this simple animation in my portfolio. but at the end of  the animatio it scrolls back to the top of the page and I can't solve this problem, I'll leave the codeine below

 

i also noticed that the problem manifest itself when I deploy the site with Firebase so I'll leave the link. here: https://portfolio-54954.web.app

also the repo on github: https://github.com/Arm0ny?tab=repositories

 

please help🤧

 

See the Pen dyeMaWW by STR4NG3R (@STR4NG3R) on CodePen

[Optimizing scrollTriggered cards animation]

16 minutes ago, Cassie said:

The most performant properties to animate are opacity and transforms. Box shadow is going to cause issues.

 

Good luck!

hi, thankyou for responding! i didn't actually know that 😊, and what about the scrollTrigger instances that i'm creating into the forEach? do they impact on the performance? and is there a way not to create one of it for each card?

[Optimizing scrollTriggered cards animation]

hi guys i created this little cards animation using GSAP ScrollTrigger plugin but i noticed some lag on less powerfull devices, is there a way to optimize my code? i'm a bit new to GSAP😊

i'll leave the codepen below

 

it's not scaling the way it does on the browser but trust me it does😂

See the Pen dyeMaWW by STR4NG3R (@STR4NG3R) on CodePen

[animate snap-scrolling items]

hi guys I'm trying to animate some cards in my project, the cards are within a scrollable element, in a few fords I want the card that is in the center of the viewport to fade out and the rest to remain at their current state, but whenever I scroll they fade out all at once, any help?

I'll leave the code here

function isVisible (ele) {
    const { top, bottom } = ele.getBoundingClientRect();
    const vHeight = (window.innerHeight || document.documentElement.clientHeight);
    return (
        (top > 0 || bottom > 0) &&
        top < vHeight
    );
}

projectWrapper.addEventListener('scroll', () => {
    [...projectCards].forEach((card, i) => {
        if (isVisible(card)){
            gsap.to(`.project:nth-child(${i})`,{opacity: 0, duration: 2})
        }
    })
})

 

See the Pen dyeMaWW by STR4NG3R (@STR4NG3R) on CodePen