Hero animation ScrollTo + ScrollTrigger

[Cristina1]

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

[mvaneijgen]

Hi @Cristina1 welcome to the forum! What exactly is the issue? The animation seems great.

 

We have  Stackblitz starter templates for both Vue and Nuxt if you're having trouble implementing, if you could setup a minimal demo in there with your issue, someone can surely take a look for you.

[Cristina1]

Hi mvaneijgen,

the problem is not on CodePen but in my code.

[mvaneijgen]

36 minutes ago, Cristina1 said:

the problem is not on CodePen but in my code.

I get that, so I'm asking what the problem is? Are you getting errors, what are the errors?

 

My advice would be recreate the issue in our Vue.js Stackblitz starter template, that way we can dive into the code and see the issue. Don't worry about including your whole project, some coloured divs are all we need to pin point the issue.  

[Cristina1]

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

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

[Cristina1]

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:

[Cassie]

There are a lot of incongruencies between your site and the demo.

But to start with, you need to put all your GSAP code inside the onMounted callback. I'm not sure how to help further as your styling is too broken to really make any headway. I'd suggest getting the styling fixed first then adding animation!

https://stackblitz.com/edit/github-ci9dvv-mbbzhv?file=pages%2Findex.vue,components%2FHeroAnimation.vue

[Cristina1]

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

[Rodrigo]

Hi,

 

Sorry to hear about the troubles, but unfortunately we don't have the time resources to fix general HTML/CSS problems for our users or custom JS that lands outside the realms of GSAP. Due to the aforementioned time constraints, we need to keep these free forums focused on GSAP related issues. You can hire us on a consulting basis or post in the Jobs & Freelance forums to get help there.

 

The advice I could give you is to start with just your HTML and CSS, in the simplest setup you can have and then start adding up styles and elements. When it comes to animations the approach should be the same, first create a simple GSAP animation and then move up.

 

Good luck  with your project!

Happy Tweening!