Jump to content
GreenSock

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

Ramate

Members
  • Posts

    3
  • Joined

  • Last visited

Ramate's Achievements

  1. Thanks for your answer, @OSUblake. I experimented changing the duration to really small or really big values and now I can see how it influences. It was kind of hard to determine the right duration, in my case it means that secondary animation should end together with the others. Is there a way to precise it?
  2. Hello @Cassie, thanks a lot for your answer. It worked! ((((:::: Funny that I have been trying something similar before, adding the last animation to the first timeline, but in my attempt I didn't include the duration and position parameter. So I am now asking myself why the duration would influence the scrollTrigger, as the animation is connected to the scroll distance, and has no defined time in seconds. I am kind of surprised. Would you give me a glimpse of it? Thanks again!
  3. Hello! I would like to have different animations triggered by the same scrollTrigger settings. Most of the animations are added to an Array with a loop, and they work pretty fine. One of them is not in the array and didn't worked until I created another timeline with the same scrollTrigger settings. So I was wondering if there is another (and more elegant) solution with just one timeline. Following the code I wrote until now. I could not add a codepen as I don't have an pro account to upload the assets. Thanks a lot! (: let tl = gsap.timeline({ scrollTrigger: { trigger: "#cover", start: "top top", end: "bottom top", pin: true, pinSpacing: false, scrub: true, markers: true, }, }); const delayValue = -30; tl.set(".slices", {opacity: 0, scale: 0.1, delay: delayValue}); const slices = gsap.utils.toArray(".slices"); // SHUFFLE ARRAY const shuffle = (arr) => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }; const shuffled = shuffle(slices); // slices.forEach((slice) => { tl.to(slice, { scale: 1, opacity: 0.85, delay: delayValue, }).to(slice, { scale: 0.85, opacity: 0, }); }); // GRADIENT const gr1 = "linear-gradient(90deg, rgba(87, 103, 56, 1) 0%, rgba(204, 128, 97, 1) 20%, rgba(138, 128, 186, 1) 100%)"; const gr2 = "linear-gradient(120deg, rgba(138, 128, 186, 1) 0%, rgba(204, 128, 97, 1) 80%, rgba(87, 103, 56, 1) 100%)"; let tl1 = gsap.timeline({ scrollTrigger: { trigger: "#cover", start: "top top", end: "bottom top", pin: true, pinSpacing: false, scrub: true, markers: true, }, }); tl1.fromTo(".headline", {backgroundImage: gr1}, {backgroundImage: gr2});
×