Some more questions about scrollTrigger

[eddiedev]

Hello guys,

Thanks to the detailed response I got yesterday I was able to advance a little more (I'm still trying to reproduce the AirPods animation in order to get the hang of scrollTrigger). I was able to add more effects (opacity, scale, etc.) but I'm still a bit confused.

 

Firstly, on the apple website, there is more than 1 piece of text that scrolls through. However, I can't seem to find a way to make more than 1 div of text to scroll through. One approach I've tried is using the "onLeave" property to change the text content but I don't think it's a reliable solution as it won't work multiple times as I can't get it to repeat.

 

Secondly, on the original website, there is more than one animation scene (the one presenting the insides of the airpods, etc). I'm not sure how to do anything like that, Is it by using multiple canvases or just wiping the current canvas and starting to display a new animation on it? 

 

Also, is there any docs page that states every property that can be changed during the animations (like opacity, x, y ,etc.)?

 

Thanks for reading, any help is appreciated!

See the Pen LYemWxy by edi-bociu (@edi-bociu) on CodePen

[Cassie]

Hey Eddie.

have you watched this instructional video?
 

In terms of what you can animate - GSAP can animate pretty much anything animatable (and many more things that technically aren't.)

It would be impossible to write a complete list.

If you're coming from a CSS world this is a small idea.

 

GSAP	CSS
duration: 1	animation-duration: 1s
repeat: -1	animation-iteration-count: infinite
repeat: 2	animation-iteration-count: 2
delay: 2	animation-delay: 2
yoyo: true	animation-direction: alternate
fill: '#008080'	fill: #008080
stroke: '#008080'	stroke-color: #008080
opacity: 0.5	opacity: 0.5
x: 100 (svg units)	transform: translateX(100px)
y: 100 (svg units)	transform: translateY(100px)
xPercent: 50	transform: translateX(50%)
yPercent: 50	transform: translateY(50%)
scale: 2	transform: scale(2)
scaleX: 2	transform: scaleX(2)
scaleY: 2	transform: scaleY(2)
rotate: 90	transform: rotate(90deg)
transformOrigin: '50% 50%'	transform-origin: 50% 50% - fill-box
svgOrigin: '100 200'	transform-origin: 100 200 - view-box

 

[eddiedev]

16 minutes ago, Cassie said:

Hey Eddie.

have you watched this instructional video?
 

In terms of what you can animate - GSAP can animate pretty much anything animatable (and many more things that technically aren't.)

It would be impossible to write a complete list.

If you're coming from a CSS world this is a small idea.

 

GSAP	CSS
duration: 1	animation-duration: 1s
repeat: -1	animation-iteration-count: infinite
repeat: 2	animation-iteration-count: 2
delay: 2	animation-delay: 2
yoyo: true	animation-direction: alternate
fill: '#008080'	fill: #008080
stroke: '#008080'	stroke-color: #008080
opacity: 0.5	opacity: 0.5
x: 100 (svg units)	transform: translateX(100px)
y: 100 (svg units)	transform: translateY(100px)
xPercent: 50	transform: translateX(50%)
yPercent: 50	transform: translateY(50%)
scale: 2	transform: scale(2)
scaleX: 2	transform: scaleX(2)
scaleY: 2	transform: scaleY(2)
rotate: 90	transform: rotate(90deg)
transformOrigin: '50% 50%'	transform-origin: 50% 50% - fill-box
svgOrigin: '100 200'	transform-origin: 100 200 - view-box

 

Hi Cassie, yes I have actually seen that video a few times now. It is actually very helpful but it provides rather brief information so it doesn't help much with what I'm trying to accomplish.

Thanks for the table though!

[akapowl]

Hello again Eddie

 

51 minutes ago, eddiedev said:

Also, is there any docs page that states every property that can be changed during the animations (like opacity, x, y ,etc.)?

 

Additionaly to what Cassie wrote, you'll also find some info on that on the docs-page for the CSS-Plugin

 

Also have a look at this answer in another thread and maybe @Shrug ¯\_(ツ)_/¯'s answer further down in that thread.

 

 

 

 

51 minutes ago, eddiedev said:

Secondly, on the original website, there is more than one animation scene (the one presenting the insides of the airpods, etc). I'm not sure how to do anything like that, Is it by using multiple canvases or just wiping the current canvas and starting to display a new animation on it? 

 

It's probably by using multiple canvases. @OSUBlake showed an example for something like that in this thread

 

 

 

 

51 minutes ago, eddiedev said:

Firstly, on the apple website, there is more than 1 piece of text that scrolls through. However, I can't seem to find a way to make more than 1 div of text to scroll through. One approach I've tried is using the "onLeave" property to change the text content but I don't think it's a reliable solution as it won't work multiple times as I can't get it to repeat.

 

There is an example in that airpods thread I showed you yesterday, showing one possibility of how to do something like that

 

 

 

 

Also this forum has great search-functionality. If you search for 'airpods' you'll find lots of other helpful threads, like these e.g.

 

 

 

 

[eddiedev]

Thanks for the response Paul! Very helpful and detailed. 

4 minutes ago, akapowl said:

There is an example in that airpods thread I showed you yesterday, showing one possibility of how to do something like that

 

 

I've taken a good look at this yesterday and that example is indeed exactly what I'm looking for. The thing is that I'm using absolute and relative positioning whereas he is using "position: fixed" so I find it hard to implement something similar in my case. I was thinking about using position fixed as well and after the animation finishes just unset it but I'm not sure if it's a great idea.

[eddiedev]

I'm also looking for a way to get better control over the relation between the text and animation (a way that allows me to display some text exactly when a specific frame comes up).

[akapowl]

 

I would really really suggest not to try and tackle everything at once if you are new to ScrollTrigger, because things will become quite complex quite quickly, so it would be best to first get familiar with some simpler concepts and later try and combine them to get where you want.

 

Also the simpler your question is, the more realisitic it is to get a good answer, because taking things like these apart and then also trying to explain takes quite some time to begin with and it actually is not quite in the scope of these forums. So if you are struggling with some concept, it will always be best to prepare a demo reduced to an absolute minimum and ask with regard to that.

 

 

 

2 hours ago, eddiedev said:

I've taken a good look at this yesterday and that example is indeed exactly what I'm looking for. The thing is that I'm using absolute and relative positioning whereas he is using "position: fixed" so I find it hard to implement something similar in my case. I was thinking about using position fixed as well and after the animation finishes just unset it but I'm not sure if it's a great idea.

 

That's what the pinning is for in the codepen I posted yesterday. One thing that is very important, especially with regard to scroll-based animating, is a solid base layout (HTML and CSS). If you change one bit of your animation logic, it might happen that it doesn't work the way you wanted with the layout you initially had and you'll have to tweak some things.

 

That's why in the example below I changed some things with regard to that. A lot of the ins and outs you will only get to know over time because there is just too much to possibly know - and also since there would be too much too explain with regard to that demo, I'll just try to stick to the what's most important there with regard to the ScrollTrigger. For simplicity and better visibility I set the number of frames to 100 in the demo.

 

 

First, I would just set up a scrubbing ScrollTrigger, that has the same start and end as the frame-changing one.

 

2 hours ago, eddiedev said:

I'm also looking for a way to get better control over the relation between the text and animation (a way that allows me to display some text exactly when a specific frame comes up).

 

For getting to that you will have to get a good grasp about how durations of tweens/timelines work with ScrollTriggers that have a scrub applied.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

The gist being, that the whole duration of a tween attached to a scrubbing ScrollTrigger will be spreads across the start and end of that ScrollTrigger. Now if you had a timeline with two tweens sequenced, each of them would take 50% of that scroll-duration and so forth.

 

So if you want an easy way to start something at a very specific frame, what you could do is add an empty tween to the timeline that has a duration equal the number of frames you have (which I do last thing here). Now by making use of the position parameter, you can basically target the frame where you'd want things to start and in the duration use the number of frames you want it to run for (see tweens on .second-quarter, .third-quarter and .second-half). Check the top left and see how the green boxes get faded out in between those frames now.

 

For anything else you could either calculate things - somewhat like I did here on the .text.fading tweens - or you could set no durations and position parameters at all and as already mentioned everything will just be spread out between the start and end of the ScrollTrigger automatically.

 

const textFading = gsap.timeline({  
  defaults: {
    ease: 'none',
    duration: frameCount / 6 // <-- frameCount devided by number of total relevant tweens for spreading out across whole scrub-distance
  }  
})

textFading
.to('.text.fading.one', { autoAlpha: 1, y: 0 })
.to('.text.fading.one', { autoAlpha: 0, y: -50 })
.to('.text.fading.two', { autoAlpha: 1, y: 0 })
.to('.text.fading.two', { autoAlpha: 0, y: -50 })
.to('.text.fading.three', { autoAlpha: 1, y: 0 })
.to('.text.fading.three', { autoAlpha: 0, y: -50 })

// ----- ----- ----

.to('.second-quarter', { autoAlpha: 0, duration: 25 }, 25)
.to('.third-quarter', { autoAlpha: 0, duration: 25 }, 50)
.to('.second-half', { autoAlpha: 0, duration: 50 }, 50)

// ----- ----- ----

.to({}, { duration: frameCount }, 0)



ScrollTrigger.create({
  
  trigger: '.canvas-wrap',
  scrub: true,
  start: 'top top',
  end: '+=100%',
  animation: textFading
  
})

See the Pen popVwrZ by akapowl (@akapowl) on CodePen

[eddiedev]

Thanks again for every explanation and for the time you spent doing that demo, it is literally what I've been working on the past days. I'll start looking more into the simpler concepts for now.