[SplitText doesn't work on Chrome]

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!

See the Pen wvNEeyO by Cristina-Corghi (@Cristina-Corghi) on CodePen

[Blur effect intersection]

Thank you! That was exactly what I was looking for

[Blur effect intersection]

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.

See the Pen qBgyvWR by Cristina-Corghi-the-bold (@Cristina-Corghi-the-bold) on CodePen

[Add Effects to Carousel]

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...

See the Pen mdaPqJb by Cristina-Corghi (@Cristina-Corghi) on CodePen

 

Thank you in advance.

[Add Effects to Carousel]

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

[Add Effects to Carousel]

Hi @Rodrigo,

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

[Add Effects to Carousel]

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?

See the Pen poqyzmw by Cristina-Corghi (@Cristina-Corghi) on CodePen

[Hero animation ScrollTo + ScrollTrigger]

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

[Hero animation ScrollTo + ScrollTrigger]

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:

[Hero animation ScrollTo + ScrollTrigger]

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

[Hero animation ScrollTo + ScrollTrigger]

Hi mvaneijgen,

the problem is not on CodePen but in my code.

[Hero animation ScrollTo + ScrollTrigger]

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.

See the Pen JjeaXMW by Cristina-Corghi (@Cristina-Corghi) on CodePen