Jump to content
Search Community

Animating elements with same class when each enter viewport with ScrollTrigger

dhaliwallambi test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello,

 

I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'.

 

My JS is

let exptl = gsap.timeline({
  scrollTrigger:{
    trigger: ".z-out",
    start: "top 85%",
    end: "top 5%",
    stagger: 1,
    scrub: 2,
    markers: true
  }
});
exptl.from(".z-out", {
  x: 100,
  opacity: 0,
  duration: 1
});

 

The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured.

 

I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them.

 

Codepen: 

 

See the Pen qBNedNK by SahiljeetSingh (@SahiljeetSingh) on CodePen

Link to comment
Share on other sites

Hey,

 

The stagger is not part of the config options of ScrollTrigger, you should move it to the tween config object:

let exptl = gsap.timeline({
  scrollTrigger:{
    trigger: ".z-out",
    start: "top 85%",
    end: "top 5%",
    scrub: 2,
    markers: true
  }
});
exptl.from(".z-out", {
  x: 100,
  opacity: 0,
  stagger: 1,
  duration: 1
});

 

Finally you could explore the batch() method, I believe that would be more appropriate for what you're trying to do:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

In my Portfolio, I'm using the ScrollTrigger with Locomotive Scroll, (The code is below). I'm a newbie in JS. So, When  I try to use batch method, locomotive scroll and everything with scrolltrigger breaks. It would be great if you can write some syntax for me (Just the batch method).

 

Codepen:  (I don't know why it isn't working on codepen, but this syntax (without batch method) works on my computer).

 

 

gsap.registerPlugin(ScrollTrigger);

// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".data-scroll-container"),
  smooth: true,
  smoothMobile: true
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".data-scroll-container", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector(".data-scroll-container").style.transform ? "transform" : "fixed"
});

let exptl = gsap.timeline({
  scrollTrigger:{
    trigger: ".z-out",
    start: "top 85%",
    end: "top 5%",
    scrub: 2,
    markers: true
  }
});
exptl.from(".z-out", {
  x: 100,
  opacity: 0,
  duration: 1
});


// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

 

Link to comment
Share on other sites

  • Solution

Hey @dhaliwallambi

 

I got your locomotive-scroll working in your demo by setting overflow: hidden to your .data-scroll-container via CSS.

Your scrollTriggers on the other hand are not working in the demo, because you are not setting that div as the scroller.

 

I can not tell you anything on the .batch method you want to use - and since I don't see anything in that direction in your code, and you actually only have those 5 images, I think what you maybe could want to do instead, is loop over those images, and create a ScrollTrigger for each of those individually.

 

Which would then look something  like this

 

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

 

 

What I did there was first set up an array with all your items with the class .z-out

 

let images = gsap.utils.toArray('.z-out')

 

and then target each of them seperately with an individual ScrollTrigger and Timeline in a .forEach loop.

 

Hope that makes sense to you and helps get a slightly better understanding.

 

Cheers,

Paul

 

  • Like 4
Link to comment
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.
×
×
  • Create New...