Jump to content
Search Community

Scrolltrigger and timeline

Dennyno test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all, I've read many post on the forum and docs, and I still can't find a solution to the task I may need to achieve. (But don't worry, it's me... 😅)
Btw, I need two things:
1) scrolltrigger must fade each element

2) timeline to add the tagger/scrub effect back and forth.

I dont know if it's the right mix:


Btw the code works smoothly, just I cant figure how to make each single element starts (with delay) after the previous one. Actually the animation starts by "row", even I set a forEach... what am I missing?

Thanks for helping
 

See the Pen QWgVqJa by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

Wow, thanks!

I still got to read and learn so much... 🙂
Just one thing, I tried changing values but cant figure how to mate transition slower, actually seems a wall in face.
Just tried, for fun 

//{ stagger: 205, duration: 205}

What's the use of timeline than? (Just to know, cause the results is "near" the same)...

Thanks

Link to comment
Share on other sites

Hi all, thanks.
It works perfectly.

Going deep:

If I add a second <ul> // <ol> (on the same page) and I replicate the code, changing the selectors.. it doesnt work...

Any hint please?

 

let main_features_home = document.querySelector("ol.one-at-time");
if(main_features_home){
gsap.fromTo('ol.one-at-time li', {
  y: 50,
  opacity: 0
}, {
  opacity: 1,
  y: 0,
  scrollTrigger: {
    trigger: ".one-at-time",
    start: "top 70%",
    end: "bottom bottom+=70",
    scrub: true,
    markers: true,
  }
});
}



Got a list of text, and need to make each of'em fadeIn, as the previous code. But both doesnt work together.

Full code then:

 

/*gsap*/
gsap.registerPlugin(ScrollTrigger);
//1
let main_features_home = document.querySelector("ol.one-at-time");
if(main_features_home){
gsap.fromTo('ol.one-at-time li', {
  y: 50,
  opacity: 0
}, {
  opacity: 1,
  y: 0,
  scrollTrigger: {
    trigger: "ol.one-at-time",
    start: "top 70%",
    end: "bottom bottom+=70",
    scrub: true,
    markers: true,
  }
});
}
//2
let cont_ul_clienti = document.querySelector(".griglia-clienti-home ul");
if(cont_ul_clienti){
gsap.fromTo('.griglia-clienti-home ul li', {
  y: 50,
  opacity: 0
}, {
  opacity: 1,
  y: 0,
  scrollTrigger: {
    trigger: ".griglia-clienti-home",
    start: "top 70%",
    end: "bottom bottom+=70",
    scrub: true,
    markers: true,
  }
});
}

Thanks all for helping

Link to comment
Share on other sites

It's hard to tell without seeing your markup Dennyno.

I would imagine you've misspelled a class or something little like that. Pop a console log in to see if the element exists.

 

let cont_ul_clienti = document.querySelector(".griglia-clienti-home ul");
if(cont_ul_clienti){
 console.log('check if this is running')
}

 

Link to comment
Share on other sites

Hi Cassie, thanks.

I post here, but gonna update also the codepen.

It's just a second ol list:

<ol class="one-at-time"">

<li>TEXT 1</li>

<li>TEXT 2</li>

<li>TEXT 3</li></ol>

Now, adding the second slice of code, all the elements appear together, just the container itelf seems fading.

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