LimitlessDigital

Thanks @mvaneijgen how can I snap it without the mousefollow then?

Hi @mvaneijgen. Can you help me? I'm finishing up my component. But I have one mistake I can't figure how to fix it. https://stackblitz.com/edit/nuxt-starter-xamezl?file=components%2FMenuAdventure.vue -> Here you see when the console.log is 5 or 0 it bugs. I don't know how to solve can you help me? Would be appreciated a LOT!

Thanks @mvaneijgen is there a possibility to make this relative? So just scale it to the size of the parent and then with a small "padding" instead of just hard "400px"?

@mvaneijgen The nicest would be if the padding/offset would be relative so that we can resize the svg.

Hi! @mvaneijgen ah that makes sense indeed! I'm very new to SVG and will dive deeper into the concepts of it in the near future after this deadline is finished haha! How can we fix the "padding issues" on the edges? See screenshot. The project I'm working on will be extremely nice! Will share it with you when it finishes!

Hi @mvaneijgen I made my svg a exact circle, but now it bugs. Can you tell me why? I can't figure.... https://codepen.io/ThijsLimitless/pen/JjzQXyp

Oh wow just saw your posts... This is EXACTLY what I needed. Thanks man!

Hi! For a new project I'm wondering how to accomplish something. Would be nice if you guys can think with me. I have a menu with a svg circle and on that circle there's a round shape. When you hover your mouse around the round shape on the circle follows the path of the circle. So I can use MotionPath for that. But how can I make the round shape "listen" to the location of the mouse and follow the circle along with it? See screenshot for clarification: https://ibb.co/bQMyskB

Ah okay nice, I'll try that!

I fixed it like this: on the mounted check if the transition is completed (on a hard refresh it is always completed) so then run the init timeline. When you switch pages the transitioncomplete toggles from false to true, I've set a watcher to watch this value and then init the timeline on change to true. Do you think this solution is okay @Rodrigo? Seems to work. watch( () => transitionState.transitionComplete, (state) => { if (state) { initTimeline() } } ) onMounted(() => { if (transitionState.transitionComplete) { initTimeline() } })

Hi @Rodrigo, Thanks for your reaction, that clarifies a LOT. How would you initialize the scrolltrigger on a cold refresh then? With the composable. When you go to a subpage and then refresh, the watcher doesn't trigger so you can only initialize the scrolltrigger on the mounted right? Or how would you do it? I updated the pagetransition though: https://63e8c1da81d24b68a483a5f7--uebler.netlify.app . But some blocks are still not working after "page switch". Example when you go from "home" to "fietsendragers" the cards aren't animating. But when you refresh they do. Modified the transitionhelper to this: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { useTransitionComposable } from '../composables/transition-composable' gsap.registerPlugin(ScrollTrigger) const { toggleTransitionComplete } = useTransitionComposable() const pageTransition = { name: 'page-transiton', mode: 'out-in', onEnter: (el, done) => { gsap.fromTo( '.pagetransition', { y: 0, }, { y: '-100%', duration: 0.8, ease: 'power4.inOut', force3D: true, onComplete: () => { toggleTransitionComplete(true) done() ScrollTrigger.refresh() }, } ) }, onLeave: (el, done) => { toggleTransitionComplete(false) gsap.fromTo( '.pagetransition', { y: '100%', }, { y: 0, duration: 0.8, ease: 'power4.inOut', force3D: true, onComplete: () => { done() }, } ) }, } export default pageTransition Without the "ScrollTrigger.refresh()" it ain't working at ALL after a page switch ... can't really find what's going wrong here. I can give you access to my git repo if you DM you your git credentials.

Is the problem that I'm using: const parallaxItem = document.querySelectorAll('.parallax__row') instead of ref?

Looks like the whole 'onMounted' isn't waiting for the full 'Mount'

I'm using this starter: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md My component looks like this: <script setup> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { onMounted, onBeforeUnmount } from 'vue' import InlineButton from '~/components/Buttons/InlineButton' gsap.registerPlugin(ScrollTrigger) onMounted(() => { const parallaxItem = document.querySelectorAll('.parallax__row') parallaxItem.forEach((item) => { gsap .timeline({ scrollTrigger: { trigger: item, start: 'top bottom', scrub: true, }, defaults: { ease: 'none' }, }) .to(item.querySelector('img'), { yPercent: 60, }) .to( item, { yPercent: -10, }, 0 ) }) }) onBeforeUnmount(() => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()) }) </script> On the first load it works okay (on the homepage the parallax grid). But when you go to the "Fietsendragers" page. The second URL in the menu, and then back to home. The scrolltrigger doesn't seem to work anymore. How can this be solved? https://63e7b435ccbb6b4206b19fa6--uebler.netlify.app This happens everytime I work with pagetransitions on this website.

I'm getting this error if I use that starter though