kylestephberry
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by kylestephberry
-
-
Also it appears that two scroll bars are showing up the first one will scroll to the bottom, then the second will scroll past the footer then do the animation.
-
I have an extremely weird issue going on and have not been able to find a solution. As you can see from my codepen which is identical to my current gsap/vuejs project, the functionality I need is working, but only on the codepen. The animation seems to run in my application, but will only start when I hit the bottom of the page, and it's like gsap adds a new blank viewport after the footer just to run the animation? Any Ideas? I'm really at a loss.
Component Folder Structure
Hero
-- HeroArch.vue-- HeroCollage.vue
-- HeroHeader.vue
-- HeroFooter.vue
-- HeroUsedBy.vue
-- index.vue
Component I'm having issue with - HeroArch.vue<script> import { onMounted, ref } from 'vue'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { gsap } from 'gsap'; import { archPhoto } from '../../data/home'; export default { setup() { const archRef = ref(null); const photoUrl = archPhoto; onMounted(() => { gsap.registerPlugin(ScrollTrigger); function intro() { const tl = gsap.timeline(); tl.fromTo(archRef.value, { y: 200 }, { y: 0, duration: 1 }); console.log('Intro tl', tl); return tl; } function stopTrigger() { const tl = gsap.timeline({ scrollTrigger: { trigger: archRef.value, start: 'top top', end: '+=1000', pin: true, scrub: true, markers: true, }, }); return tl; } const master = gsap.timeline(); master.add(intro()); master.add(stopTrigger()); }); return { photoUrl, archRef, }; }, }; </script> <template> <div class="arch" ref="archRef"> <div class="arch__image" :style="{ backgroundImage: `url(${photoUrl})` }" /> </div> </template> <style lang="postcss" scoped> .arch { position: absolute; width: 364px; height: 650px; top: 0; left: 50%; transform: translateX(-50%); @apply rounded-tl-full rounded-tr-full; overflow: hidden; } .arch__image { background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } </style>
See the Pen VwWqMyG by KyleBerry (@KyleBerry) on CodePen
Div Element Not Pinning Top Of Page (Vuejs Weird Functionality)
in GSAP
Posted
I figured out the issue and feel dumb that it was not GSAP related. Someone on my team added "100vh" to the Main component causing issues with the animation. Removing "height: 100vh;" from App.vue worked for me.