Cristina1

Hi there, I have troubles with this animation. It works well on Firefox but it doesn't work on Chrome. What's the problem? Thank you in advance!

Thank you! That was exactly what I was looking for

Hi everybody, I'm trying to do an blur effect in the intersection between two divs. The goal that I want to get is like the image below. Can anyone help me? Thanks in advance.

Hi! Can you only help me to remove, from my CodePen, the scroll of the cards? I would like to keep only the button click event if it's possible... https://codepen.io/Cristina-Corghi/pen/mdaPqJb Thank you in advance.

Ok now adding my entire project is still not working. https://stackblitz.com/edit/github-ci9dvv-kqexp3?file=README.md,components%2FHome%2FCarousel.vue The component is Carousel.vue

Hi @Rodrigo, I pasted the code into https://stackblitz.com/edit/vue-fr63hb?file=src%2FApp.vue

Hi! I tried repeating the CodePen above in my Nuxt project but to no avail. Can someone look at it and tell me what is wrong? https://codepen.io/Cristina-Corghi/pen/poqyzmw

Yeah, I think the main problem is the style. Could you help me?

The result I would like to obtain is the one in the CodePen. I published my project here: https://stackblitz.com/edit/github-ci9dvv?file=pages%2Findex.vue,components%2FHeroAnimation.vue The component is HeroAnimation.vue and now the error is this:

Hi @mvaneijgen Sorry, I didn't understand. I've just added the project on Stackblitz from GitHub. This is the link https://stackblitz.com/github/cristinacorghi/erre2?file=components%2FHeroSection.vue I hope I did everything right. Thank you in advance, C

Hi mvaneijgen, the problem is not on CodePen but in my code.

Hi everyone, I would like to recreate the animation you can see on CodePen. I'm a beginner about gsap so I need your help. My code is on vue.js and and is as follows: <template> <div class="scrollDist"></div> <div class="main"> <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="m"> <g class="medi"> <rect fill="#fff" width="100%" height="100vh" y="850" /> <image y="15%" href="../assets/img/big-cloud.svg" width="1900"/> </g> </mask> <image class="sky" href="../assets/img/sky.jpg" width="1900" /> <image class="piccoli" href="../assets/img/piccoli.svg" width="1000" x="40%" /> <image class="small-cloud" href="../assets/img/small-cloud.svg" x="1%" y="17%" width="20%" /> <image class="background" href="../assets/img/background.png" width="1900" /> <image class="medi" href="../assets/img/medi.svg" width="900" x="20%" /> <image class="grandi" href="../assets/img/grandi.svg" width="1000" x="35%" /> <text fill="#fff" x="35%" y="50%">EXPLORE</text> <image class="arrow" x="47%" y="52%" href="../assets/img/arrow-down.svg" width="30" /> <g mask="url(#m)"> <rect fill="#fff" width="100%" height="100%" /> <text x="35%" y="50%" fill="#162a43">FURTHER</text> </g> <rect ref="arrowBtn" width="30" height="100" opacity="0" x="47%" y="52%" style="cursor:pointer"/> </svg> </div> </template> <script setup> import { gsap } from "gsap"; import ScrollToPlugin from "gsap/ScrollToPlugin"; import { onMounted, ref } from 'vue'; gsap.registerPlugin(ScrollToPlugin); gsap.set('.main', {position:'fixed', background:'#fff', width:'100%', height:'100vh', top:0, left:'50%', x:'-50%'}) gsap.set('.scrollDist', {width:'100%', height:'100vh'}) gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'top top', end:'bottom bottom', scrub:1}}) .fromTo('.sky', {y:0},{y:-200}, 0) .fromTo('.medi', {y:100},{y:-1000}, 0) .fromTo('.small-cloud', {y:-150},{y:-500}, 0) .fromTo('.piccoli', {y:-10},{y:-100}, 0) .fromTo('.background', {y:-50},{y:-600}, 0) const arrowBtn = ref(null); onMounted(() => { arrowBtn.value.addEventListener('mouseenter', (e) => { gsap.to('.arrow', {y:10, duration:0.8, ease:'back.inOut(3)', overwrite:'auto'}); }); arrowBtn.value.addEventListener('mouseleave', (e) => { gsap.to('.arrow', {y:0, duration:0.5, ease:'power3.out', overwrite:'auto'}); }); arrowBtn.value.addEventListener('click', (e) => { gsap.to(window, {scrollTo:innerHeight, duration:1.5, ease:'power1.inOut'}); }); }); </script> <style> body, html { width: 100%; height: 100vh; background: #ddd; font-size: 99px; text-align: center; } div { position: absolute; } </style> Can anyone help me? Thanks in advance. C.