Scale on scroll before scrolling on the page

[De Internetarchitect]

Hi GSAP forum,

I am a noob when it comes to GSAP (have followed a small course) and I want the following.

I have a page with multiple sections.
But in the first section I have a overlaying div with an image.
When entering the page, when user starts scrolling I want that to scale (untill its out of view) and then you continue scrolling normally in the section behind it.

I don't have a clue how to do this.
Can you please help me with this?

I have created a codepen: 

 

 

 

See the Pen WNmZvaV by deinternetarchitect (@deinternetarchitect) on CodePen

[mvaneijgen]

Hi @De Internetarchitect welcome to the forum!

 

What have you tried already? We love the see what you can come up with,  that way we can see your thought process and thus better help you understand the tools!  Just trying some things is the best way to learn in my opinion! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

I would recommend first focusing on the animation you want to happen and completely forget about ScrollTrigger. In this case it is also a good idea to set the image to the biggest version and then use a gsap.from() tween to scale: 0.1 or some other value (It is easier for the browser to scale to a smaller value then to scale a small picture to a bigger value, just FYI)

 

Just try to get something off the ground and post back here what you've tried and we would be happy to take a look and point you in the right direction. 

 

Ben erg benieuwd wat je zelf al voor elkaar krijgt. Je hebt een cursus gevolgd, dus probeer wat je daar hebt gezien in te zetten en waarschijnlijk lukt 50% je al, hoop dat het helpt!

[De Internetarchitect]

Your right!

I have changed the codepen and added the animation.

Now I want 2 things:

- When its finished the entire div should be removed (display none)

- It should animate on scroll but I don't want to scroll whats behind it (yet). That should happen when animation is finished. So you basically scroll the overlay first and then user continues to scroll normally

What do I need to add to make it work?

 

[mvaneijgen]

Maybe in your browser it is different but for me (in Safari) when you scale to something larger then scale: 1 the element gets jagged edges, so I would always stay between 0 and 1. I would recommend removing GSAP and then create your overlay at the final size, eg when the animation is done. I made the overlay  200% of the current screen size and then scale it .from() 0.5 (eg 100%) 

 

I've converted your tween to a timeline and add the ScrollTrigger logic to the timeline this allows you to easily toggle it on and off to see how it would work. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

53 minutes ago, De Internetarchitect said:

When its finished the entire div should be removed (display none)

Instead of display: none I would animate to opacity: 0.  display: none is not a property that you can animate. With opacity it allows you to also scroll backwards and then show the element again. 

 

53 minutes ago, De Internetarchitect said:

It should animate on scroll but I don't want to scroll whats behind it (yet). That should happen when animation is finished. So you basically scroll the overlay first and then user continues to scroll normally

Check the pin: true property in ScrollTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Ben benieuwd of je hier mee uit de voeten kan. 

 

See the Pen zYbErPX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[De Internetarchitect]

Amazing! This is exactly what I need. 

Heel erg bedankt!

[mvaneijgen]

Nice! Glad it helps! Veel geluk met je project!

[De Internetarchitect]

I do have 3 more questions. Opacity: 0 is not enough. It is interfering with other stuff on my site.

 

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero", // Trigger elment
      pin: true, // Pin everything till the end then nomraly scroll
      scrub: true, // Tie animation to scroll
      markers: true // Show what ScrollTrigger is doing
    },
    onComplete: function() {
      overlaycontainer.style.display = 'none';
    }
  });
  tl.from(overlay, {
    // with .from() GSAP will get the inital values eg scale: 1
    duration: 2, // Duration doesn't work with ScrollTrigger scrub: true
    scale: 0.1, // set inital scale
    transformOrigin: "center", // set point from where to scale
    // opacity: 1, // This does nothing
    ease: "power2.out"
  });
  tl.to(overlay, {
    scale: 1,
    duration: 0.2,
    opacity: 0 // Hide when done
  });

1. How can I make it so that when you return (scroll back up) is is on display: block again?
2. How can animating something else (another div in the DOM) during the scrolling?
3. And also, when scrolling is complete and animation is finished, how can I start another timeline with other elements animating?
    

      .from([heroTitle, heroSubtitle, heroButton, heroList], {
          y: '200%', 
          duration: 1,
          stagger: 0.2
      })

 

[mvaneijgen]

20 minutes ago, De Internetarchitect said:

I do have 3 more questions. Opacity: 0 is not enough. It is interfering with other stuff on my site.

Can you explain what you mean with "interfering with other stuff on my site". If we know the full picture it will be easier to find a solution instead of going 180 and creating even more issues.

 

21 minutes ago, De Internetarchitect said:

• How can animating something else (another div in the DOM) during the scrolling?

Check out the position parameter when creating a timeline you can have two tweens (or as many as you want) play at the same time or overlap a bit, really powerful stuf!

 

22 minutes ago, De Internetarchitect said:

And also, when scrolling is complete and animation is finished, how can I start another timeline with other elements animating?

You already found onComplete, ScrollTrigger (https://gsap.com/docs/v3/Plugins/ScrollTrigger/) also has a bunch of those callbacks for instance onLeave which triggers when the end triggers meet. There is loads you can do with that. Hard to say what will work for your project, then we'll need to see a minimal demo. Please try asking one question at a time and with each question provide a minimal demo with what you've already tried, so that we can dive directly in to the code. 

 

[De Internetarchitect]

Quote

Can you explain what you mean with "interfering with other stuff on my site". If we know the full picture it will be easier to find a solution instead of going 180 and creating even more issues.

I needed to change the HTML structure a bit because the overlay was not in higher position then my header z-index.
My codepen is updated. When I arrive at the blue section with scrolling the overlay is hidden trough opacity but its preventing clicking behaviour for example a button inside the section. So opacity 0 is not enough because its preventing clicking behaviour

 

 

Your other comments are clear! Thanx again

[mvaneijgen]

That is what I thought! And that is easily fixed. You could give the overlay section the CSS property pointer-events: none; or if you want it to be clickable at first and not when the animation is done use a tl.set(overlay, {pointerEvents: "none" }) at the end of the timeline. 

 

It is the classic XY problem  when asking for help online always include the issue you're having not the problem you want to solve, because there is usually an easy fix that you didn't even think about. Hope it helps and happy tweening! 

[De Internetarchitect]

Mijn dank is groot!

[De Internetarchitect]

@mvaneijgen  I checked position parameter I get this now.
I want to make the background grow during the scrolling animation

document.addEventListener('DOMContentLoaded', function() {
   
gsap.registerPlugin(ScrollTrigger);

  const overlay = document.querySelector(".section-bgmask");
  const bgphoto = document.querySelector(".section-bgphoto");
  const heroTitle = document.querySelector('#section-01 h1');
  const heroSubtitle = document.querySelector('#section-01 p');
  const heroButton = document.querySelector('#section-01 a');
  const heroList = document.querySelector('#section-01 ul');

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: "#section-01",
      pin: true, // Pin everything till the end then nomraly scroll
      scrub: true, // Tie animation to scroll
      markers: true // Show what ScrollTrigger is doing
    }
  });
  tl.from(overlay, {
    duration: 0.5, // Duration doesn't work with ScrollTrigger scrub: true
    scale: 0.1,
    transformOrigin: "center",
    ease: "power2.out"
  });
  tl.from(bgphoto, {
    backgroundSize: '100% auto',
    duration: 0.5
  }, "<");
  tl.to(overlay, {
    scale: 1,
    duration: 0.5,
    opacity: 0
  });
  tl.from([heroTitle, heroSubtitle, heroButton, heroList], {
    y: '200%', 
    duration: 1,
    stagger: 0.2
  });

This is how I should do it right?

[mvaneijgen]

Do you have a minimal demo we could take a look at, so we can dive directly into the code?

[De Internetarchitect]

Ill do this via my host. Hopefully its ok because takes to much time to put everything in a codepen:

https://deinternetarchitect.com/

https://deinternetarchitect.com/js/custom.js
 

I got a step further with what I need. So these questions I still have

1. I am now animating backgroundSize: 100% auto.
   But that causes problems. Can I also zoom in a background size cover? Because of mobile / desktop
2. I want this one to start after scrolling is done. And also they should animate in automatically. Now they are also based on scroll. How do I do that? 
   tl.from([heroTitle, heroSubtitle, heroButton, heroList], {

[mvaneijgen]

1 hour ago, De Internetarchitect said:

Ill do this via my host. Hopefully its ok because takes to much time to put everything in a codepen:

Yep I know, but the problem is we can't edit your live site and we can't help you if we can't edit the code.

 

Working on Codepen, might be more work, but it allows you to experiment more (extra benefit you can share your work if you need feedback) and this allows you to really kickstart your learning. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I hope you understand. We ask our users to put in some effort to get (free) support, which allows us to help everyone here! 

[De Internetarchitect]

 

https://codepen.io/deinternetarchitect/pen/WNmZvaV

Done, updated the codepen

[mvaneijgen]

2 hours ago, De Internetarchitect said:

I am now animating backgroundSize: 100% auto.
But that causes problems. Can I also zoom in a background size cover? Because of mobile / desktop

I'm not a fan of background-image, you can not load different images for different screen sizes (I heard this might be possible now, but is fairly new, so then you have to worry about browser support) and there is no alt tag on the images, so I rather use a normal image (on which I can use scale) and just give it the css object-fit: cover; height: 100%; width: 100%; which is practically the same as background-size: cover;

2 hours ago, De Internetarchitect said:

I want this one to start after scrolling is done. And also they should animate in automatically. Now they are also based on scroll. How do I do that? 

Sure thing, check the docs for the callback events https://gsap.com/docs/v3/Plugins/ScrollTrigger/  onLeave fires when you leave the ScrollTrigger, so that is the perfect time to do something. In the example below I've create a new timeline which get paused on page load and then .play() on leave and you can even set an onEnterBack to reverse it when visitors scroll back up. Hope it helps and happy tweening! 

 

See the Pen oNVoJRN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[De Internetarchitect]

Perfect! thanx so much.

Last question. When the mask is fully scaled. You see that its moving up. Because of the scrolling still being in progress. How can I prevent that. I want it to be gone and not seeing it being moved vertically. 
Can I maybe also choose the end point for my scrolling animation?

 

just like the start point: start: 'top top'

 

Update: I have tried "end" it but does not really does the trick.
The end point should be the end of the section but the mask should disappear earlier so when its fully scaled it does not move around.

[mvaneijgen]

A tween has a default duration of 0.5 seconds and a default ease of power1.out (which means it will start fast en goes slower at the end, see the ease vizualizer). If you set ease: "none", it will feel a lot smoother with a scrubbed timeline and instead of the last .to() tween do a .set() which is a zero duration tween eg it will just do it instantly. Hope it helps and happy tweening! 

 

See the Pen jOJYYwy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[De Internetarchitect]

@mvaneijgen I have another question. After the scrolling animation is finished. Can I extend the time that the scrolling is pinned with a couple of seconds?
So that the animations that are playing OnLeave first can finish before the normall scroll starts.

[mvaneijgen]

You could create two ScrollTriggers one for the animation and one for the pinning. But you could also just add the tweens in the onLeave to the timeline itself, but instead of adding them directly to the timeline you can call them using a function, see https://gsap.com/docs/v3/GSAP/Timeline/add()/ so that they don't listen to the scrub value. Then you probably also want to add some empty scroll space to the ScrollTrigger I always do this with tl.add(() => {}, "+=1"); which does nothing for 1 second (you need to convert that 1 second to ScrollTrigger scroll distance).

 

Hope that helps, otherwise please create minimal demo showing what you've tried and we'll be happy to take a look at your code.

[De Internetarchitect]

@mvaneijgen can you show me an example of what you suggested?
Ive updated my pen:

[mvaneijgen]

Can you show us what you've tried and what is not working? That way we can see your thought process and thus better help you understand the tools. Please also tell us what is not working, so we can help you debug. Also include a link to your pen, so we don't have to go search for it in previous comments.

[De Internetarchitect]

@mvaneijgen I have updated my pen but every time I try to include the url it does not load in my message for some reason. Ill add in a code block.

Ive checked the timeline add url but I don't get exactly where to add it and also why it does not make any difference now (don't see a delay).
See in my code pen line 45.

https://codepen.io/deinternetarchitect/pen/WNmZvaV

 

[mvaneijgen]

If you just paste the link in your message, it will get converted to an embed when you post your message. 

 

I would highly recommend checking out the docs, definitely when you get it linked based on a question you're asking.  I know it sounds boring, but the GSAP docs are great, they tell you everything you would ever want to know (about GSAP) with detailed instructions examples and even the odd video here and there.  With that knowledge it is just a question of trying things out and experimenting what will fit in your case. 

 

See the Pen PoLQrQa by mvaneijgen (@mvaneijgen) on CodePen