ScrollTrigger scrub value from dataset

[shaderpixel]

I am trying to create a simple parallax slide using scrollTrigger. I am wondering if there is a simple way to pull in the scrub value from the markup using data attributes e.g. data-speed="0.15" instead of hardcoding it. As I believe, GSAP internally uses document.querySelectorAll so how can I get different data-speed to apply to the scrub property?

Also is scrub the value to use if I want to control the parallax speed? If not, what should I use instead?

Below is my current setup:

      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: '.gs-parallax-item',
          scrub: 0.25,
          start: 'top bottom',
          end: '80% top',
        },
      });

Thanks for the assist!

[ZachSaucier]

Hey shaderpixel.

 

17 minutes ago, shaderpixel said:

is scrub the value to use if I want to control the parallax speed?

Scrub is just the duration of the tween that is used to animate to whatever value the animation to its "current" values. So if your animation is creating a parallax effect, it could control the "speed" depending on what you mean by speed.

 

17 minutes ago, shaderpixel said:

how can I get different data-speed to apply to the scrub property?

Instead of using one ScrollTrigger and animation for all of your items you'd need to loop through each of your items and create an animation and ScrollTrigger for each. 

 

Inside of the loop you can make use of the element's data attribute to set the scrub value.

elem.dataset.speed

 

We have a few example demos that are related to what you're trying to do I believe:

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

See the Pen ZEbgGOp by creativeocean (@creativeocean) on CodePen

See the Pen abdyPBw by isladjan (@isladjan) on CodePen

[shaderpixel]

These are great examples! Are there any examples that make use of images instead of background images (that's my current use case, unfortunately)?

[ZachSaucier]

I don't understand. If you have control over the HTML and CSS you could make them background images. Or absolutely position the <img> elements behind the other content... What's your issue?

[shaderpixel]

You are right, my bad. I was overthinking it. Thank you so much for your help!

[TeddyBrown]

Hi guys! 

I didn't want to start another topic, so I take advantage of this one!

I don't understand how to use data-attributes and ScrollTrigger together.

 

  <div class="box-wrapper">
    <div class="box" data-from='{"yPercent": "0", "rotation": "60"}'></div>
    <div class="box" data-from='{"yPercent": "90", "rotation": "20"}'></div>
    <div class="box" data-from='{"yPercent": "40", "rotation": "10"}'></div>
    <div class="box" data-from='{"yPercent": "5", "rotation": "0"}'></div>
    <div class="box" data-from='{"yPercent": "10", "rotation": "20"}'></div>
  </div>

gsap.utils.toArray('.box').forEach((elem, i) => {
  let from = JSON.parse(elem.dataset.from);
  gsap.from(elem, {
             from,
    scrollTrigger: {
       trigger: ".box-wrapper",
       start: "top bottom",
       end:"bottom center",
       scrub:true, 
       markers:true
    }
  });
})

Invalid property from set to Objectrotation: "20"yPercent: "10"__proto__: Object Missing plugin? gsap.registerPlugin()

Here's the codepen link: 

See the Pen OJMdxZY by teddybrown (@teddybrown) on CodePen

 

I know it's a dumb question but please give me some hint!

 

Thank you!!!

 

 

[_Greg _]

Hi!

as i see you get variable from like {yPercent: "0", rotation: "60"}, with gsap its look like:

gsap.from(elem, { {yPercent: "0", rotation: "60"}, scrollTrigger: ... rest code

but must be like:

gsap.from(elem, { yPercent: "0", rotation: "60", scrollTrigger: ... rest code

without {} 

 

Or i'm wrong?

[TeddyBrown]

33 minutes ago, Nekiy2 said:

Hi!

as i see you get variable from like {yPercent: "0", rotation: "60"}, with gsap its look like:

gsap.from(elem, { {yPercent: "0", rotation: "60"}, scrollTrigger: ... rest code

but must be like:

gsap.from(elem, { yPercent: "0", rotation: "60", scrollTrigger: ... rest code

without {} 

 

Or i'm wrong?

Hi Nekiy2!

Thank you for your answer!

Yeah in GSAP with ScrollTrigger there are two curly braces less but I need the JSON strings to later parse them into an object (you can't use string).

In GSAP it works but with ScrollTrigger no!  

I just need to understand how to write the code to let them works also in ScrollTrigger!

 

[ZachSaucier]

Hey Teddy. You can use Object.assign() to combine objects:

See the Pen wvMOBYj?editors=0010 by GreenSock (@GreenSock) on CodePen

[TeddyBrown]

Thank you Zach!

Have a nice day!