Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shaderpixel

ScrollTrigger scrub value from dataset

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!!!

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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! :)

 

Share this post


Link to post
Share on other sites

Thank you Zach!

Have a nice day!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×