Total beginners Question: scrollTrigger scrubbing – where does the frame count come from / how does it update?

[Snail]

  gsap.registerPlugin(ScrollTrigger);

  var frame_count  = 12,
      offset_value = 100;

  gsap.to(".viewer", {

    backgroundImage: "url('img/img"+ frame_count +".png')",
    ease: "steps(" + frame_count + ")",

    scrollTrigger: {
      trigger: ".scene",
      start: "top top",
      end: "+=" + (frame_count * offset_value),
      pin: true,
      scrub: true
    }
  });

Sorry for this total beginners question - i'm trying to wrap my head around a prototype, non production gsap scrolltrigger scrubbing animation, while getting to know gsap as a whole. Love it already, but it's a bit like magic happening under the hood with very little code to write, making it hard to trust it as a beginner or dig in to understand it below the hood.

 

I have ...
– the gsap main library and scrolltrigger plugin

– a very simple html structure with a scene that is 100vh 100vw, (and some header above and below that).
– a div that is centered in that scene, that has a background image named "img1.png" 

– the javascript / gsap code above, adapted from one of your examples, that scrubs through that animation in 12 frames, exchanging the img1.png for img2.png for img3.png etc. until img12.png each step.

– (i do understand canvas or sprites are smarter in production, i just want to keep it very simple for now.)

This works perfectly, i'm happy! End of story 😃

 

But i don't get it ...

Where in that code is the variable frame_count updated to the new number between 1 and 12?

– I have set the img1.png in the initial css, so far so clear.

– I understand that with gsap.to i define the end-state of an animation, so the resulting img12.png is clear to me too somewhat.

– But: where do the numbers 2 – 11 in between come from, and how do they get into the css background-image? I understand that for numeric values this is done when tweening, and is one of the purposes of gsap after all. But does it the same in the string  url('img/img"+ frame_count +".png') automagically by looking for a number in the string and changing that through time, or is the variable frame_count somewhat registered to be the changing element of that otherwise static string?

 

 

Extended academic question:

I by now know this might be better done with a timeline repeat, but just for understanding it:

My initial academic idea in my prototype was to have only 12 images numberned 1 to 12 to cycle through, but have 24 steps in the animation (positioning / rotating it additionally). So the images would cycle through twice until the end of the animation (like a clock cycling through twice a day).

After the 12th step, i would run out of image files with the approprate number. I then wanted to wrap around the counter, and reuse img1 for step 13, img2 for step 14, etc. – calculating the remainder with frame_count % 12 and reference the matching image file to the remainder then, like this: url('img/img"+ frame_count % 12 +".png')   

 

This does not work (and i'm not surprised it doesn't, there's not clue it could, in the given position in the code).
Question is: would there be a way to inject some custom counter function in the loop / tween / however it is called?

 

thanks for any enlightment :-)
Snail

[Rodrigo]

Hi @Snail and welcome to the GreenSock forums!

 

The update is not changing any frame value anywhere. The stepped ease is doing all the magic here ✨

 

https://greensock.com/docs/v3/Eases/SteppedEase

 

Here you can see it at work

https://greensock.com/docs/v3/Eases

 

So that basically increases the image number from one to the value you passed by one each time. So if you need 24, 36 or any other number just change that value in your frame_count variable and it should work.

 

Hopefully this clear things up.

Happy Tweening!

[Cassie]

 

Quote

 I understand that for numeric values this is done when tweening, and is one of the purposes of gsap after all. But does it the same in the string  url('img/img"+ frame_count +".png') automagically by looking for a number in the string and changing that through time, or is the variable frame_count somewhat registered to be the changing element of that otherwise static string?

 

GSAP can tween more than numeric values, in this case it's tweening a string - From the docs!
 

Quote

 

With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more.

Note: A common mistake is to forget to use camel case representations of the properties, so instead of “font-size”, you’d use “fontSize”. “background-color” should be “backgroundColor”.

CSSPlugin can animate complex strings like boxShadow: "0px 0px 20px 20px red", borderRadius: "50% 50%", and border: "5px solid rgb(0,255,0)". 

 

 

Quote

 

Extended academic question:

I by now know this might be better done with a timeline repeat, but just for understanding it:

My initial academic idea in my prototype was to have only 12 images numberned 1 to 12 to cycle through, but have 24 steps in the animation (positioning / rotating it additionally). So the images would cycle through twice until the end of the animation (like a clock cycling through twice a day).

After the 12th step, i would run out of image files with the approprate number. I then wanted to wrap around the counter, and reuse img1 for step 13, img2 for step 14, etc. – calculating the remainder with frame_count % 12 and reference the matching image file to the remainder then, like this: url('img/img"+ frame_count % 12 +".png')   

 

This does not work (and i'm not surprised it doesn't, there's not clue it could, in the given position in the code).
Question is: would there be a way to inject some custom counter function in the loop / tween / however it is called?

 

Sounds like a repeat would be best here, if you need more help please link to a minimal demo on codepen and I'll take a look!

[Snail]

Thanks @Rodrigo and @Cassie for the replies, both are of value for me to understand things better.

 

 

Regarding Tweening of non-numeric css value:

So i understand right that GSAP is able to tween something like background-image:url('img1.png')

and due to the stepped ease, this happens in full numbers from 1 to 12. That's great

I immediately broke this by having a folder name with a number in it that tweened too: background-image:url('images1/img1.png')

but that's something that can be avoided of course in production projects.

 

 

Regarding manipulating the tween number (like applying a remainder funktion on it etc.):

i get it that would be a bad idea now that i understand the principle better. Repeat is the way here definitely.

 

 

Thanks for the offer looking at a minimal demo, but as i'm just tinkering at the moment, it would be too much effort just for me learning basics ... I'm sure i'll be back with more practical questions (and a club greensock subscription).