Prévost Clément
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Prévost Clément
-
-
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
Changing pages causes gsap animations bug
in GSAP
Posted
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.