Prévost Clément

I would like to follow up on this topic. Here is a link where you can see my issue more easily if anyone has any leads. I'm stuck. https://portfolio-omega-two-26.vercel.app/ You need to scroll on the homepage to "Experience" and finish scrolling the animation. Then you need to switch from the homepage to "Photographie" and come back to the homepage. The element in "Experience" called "Alpydev" no longer appears in the animation ? Do you have any ideas? Thank you in advance for your help.

Thank you very much for your advice, I will try to apply all of this to my website! the context can therefore be replaced by matchMedia if I understood correctly? Thanks for your help !

Hello, Thank you for your answers ! Unfortunately this didn't solve my problem... Here is a stackblitz that I was able to set up with your advice https://stackblitz.com/edit/nuxt-starter-mthuhk?file=pages%2Findex.vue You can see the problem. Here it is the fact that sometimes not always when you go from one page to another the bug animations. For my part on stackblitz you have to change twice to have the problem. Thanks for any new advice or referrals. PS: forgive me if I express myself badly. My native language is not English. THANKS.

My problem is quite simple, but I can't find any solution despite reading numerous articles. To quickly explain: When I load the home page of my site or any page for the first time my GSAP animations work perfectly. However, when I change pages and then come back to the page before my annimations find themselves completely crashed... Here is an example script in a component that I use <script setup> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; let ctx; let timelinePresentation = false; onMounted(()=>{ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.refresh() ctx = gsap.context( () => { if( window.innerWidth >= 786 ) { timelinePresentation = createTimeline_desktop_presentation(); } else { timelinePresentation = createTimeline_mobile_presentation(); } } ) }) onUnmounted( () => { ctx.kill(); } ) function createTimeline_desktop_presentation() { gsap.set('#presentation .rotateOpacity', {rotate: 15, opacity: 0, yPercent: 100, xPercent: 20}); let scrollOnPresentation = gsap.timeline({ scrollTrigger: { trigger: '#presentation', pin: true, start: "top", end: "+=1300", scrub: 1, // markers:true, } }); scrollOnPresentation.to('#presentation .rotateOpacity', { rotate: 0, opacity: 1, yPercent: 0, stagger: 0.2, xPercent: 0, }); return scrollOnPresentation; } function createTimeline_mobile_presentation() { gsap.set('#presentation .rotateOpacity',{rotate : 15,opacity : 0,yPercent:100,xPercent:20}); const elementToScrollAnimate = document.querySelectorAll('#presentation .rotateOpacity'); elementToScrollAnimate.forEach(el => { gsap.to(el, { rotate : 0, opacity : 1, yPercent:0, xPercent:0, duration : 0.25, scrollTrigger : { trigger:el, toggleActions: 'play none none reverse' } }) }) return elementToScrollAnimate; } // ######### // IMG HOVER // ######### const filterImgRef = ref('filter:grayscale(100%);') const onhover = () => { filterImgRef.value = '' } const onleave = () => { filterImgRef.value = 'filter:grayscale(100%);' } </script> Does anyone have a solution? I used several solutions as seen in the code above. It may be messy. I am open to any modification or good practice that I do not apply thank you in advance for your help