Multiple scroll trigger with Tween

[barn]

Hi I was wondering if there are any 

codepen out there that helps to understand how to apply independently multiple scroll trigger without timeline

Im trying to implement sticky position horizontal scroll in webflow

https://imgur.com/a/mgiAnPg

where the 1st scroll trigger is vertical and the 2nd is horizontal

My question is, is it possible to have 2 different embed script to implement this

or they interfere?

If it is possible, by any chance are there any example out there in GSAP repository?

 

[GSAP Helper]

Sure, that sounds entirely doable. If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Good luck! ?

[barn]

On 9/5/2022 at 8:52 PM, GSAP Helper said:

Sure, that sounds entirely doable. If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Good luck! ?

I only could find

nested timeline impression, but only works on horizontal axis (there are no multiple tween option among the demos)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

<script>
// Optional - Set sticky section heights based on inner content width
// Makes scroll timing feel more natural
function setTrackHeights() {
  $(".section-height").each(function (index) {
    let trackWidth = $(this).find(".track").outerWidth();
    $(this).height(trackWidth);
  });
}
setTrackHeights();
window.addEventListener("resize", function () {
  setTrackHeights();
});
</script>

<script>
// Horizontal scroll
let tlMain = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".section-height",
      start: "top top",
      end: "98% bottom",
      scrub: 1
    }
  })
  .to(".track", {
    xPercent: -100,
    ease: "none"
  });

// hero photo
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".hero-panel",
      containerAnimation: tlMain,
      start: "left left",
      end: "right left",
      scrub: true
    }
  })
  .from(".hero-panel_img", { scale: 1.6 }, 0);

// note
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".note-panel",
      containerAnimation: tlMain,
      start: "left right",
      end: "left left",
      scrub: true
    }
  })
  .from(".note-panel_img", { rotate: 45, scale: 0.3 });

// thanks
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".thanks-panel_wrap",
      containerAnimation: tlMain,
      start: "left left",
      end: "right right",
      scrub: true
    }
  })
  .to(".thanks-panel", { xPercent: 100, ease: "none" })
  .to(".thanks-panel_photo", { scale: 1 }, 0)
  .fromTo(
    ".thanks-panel_contain.is-2",
    {
      clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)"
    },
    { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
    0
  );

// stagger photos
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".stagger-panel",
      containerAnimation: tlMain,
      start: "left right",
      end: "right left",
      scrub: true
    }
  })
  .from(".stagger-panel_img", { x: "100vw", stagger: { each: 0.05 } })
  .to(".stagger-panel_img", { scale: 0.5, stagger: { each: 0.05 } });
</script>

and I have added the typing impression to it

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/TextPlugin.min.js"></script>

<style>
/* .typing {
	max-width: auto !important;
 	width: auto !important;
}
*/
/*blinking cursor at info section*/
  .cursor {
  animation: cursorBlink 0.5s alternate infinite;
}

@keyframes cursorBlink {
  from {opacity: 0;}
  to {opacity: 100%;}
}
</style>


<script type="text/javascript">

  
// type="text/javascript"
//define the parent scroll trigger
let tlMain = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".section-height",
      start: "top top",
      end: "98% bottom",
      scrub: 1 //1 sec delay
    }
  })
  .to(".track", {
    xPercent: -100,
    ease: "none"
  });
gsap
.timeline({
    scrollTrigger: {
      trigger: ".info",
      containerAnimation: tlMain,
      start: "center 30%",
      end: "top 0%",
      scrub: true
       }
  })
      .from(".typing_text_target", {
  text: "lorem ipsum...............................",});


gsap
  .timeline({
    scrollTrigger: {
      trigger: ".about",
      containerAnimation: tlMain,
      pin: ".typing2",
      start: "left left",
      end: "right left",
      horizontal: true,
      markers: true,
      scrub: true
    }
  })
.from(".typing_text_target2",  {
  text: "lorem ipsum...............................",});

   
 
 
</script>

however it doesnt type when I scroll the text is instant there,  the console doesn't show any bug..

If I use .to instead of .from that text doesn't appear at all

How can I use vertical trigger and horizontal trigger under one script?

 

If 

[GSAP Helper]

Perhaps you forgot to load the TextPlugin? 

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[barn]

Hey @GSAP Helper

Im not sure if this is the right demo , to implement the idea

but at least I found a way to illustrate the issue

How implement scroll triggered text typing

vertically and than in nested form horizontally?

 

 

See the Pen NWMxEXR by trashcendence (@trashcendence) on CodePen

 

 

 

 

 

 

[Cassie]

Hi there - we appreciate the sketch and demo but I'm afraid I'm not following what you're asking at all.

 

Could you try and rephrase?

[barn]

Hi @Cassie I want do first(vertical triggered typewriter scroll animation)

See the Pen xxWybZY by abirana (@abirana) on CodePen

and than, inside the same container, as it start to scroll horizontally (using the fake horizontal scrolling animation)

have again a typewriter effect animation but this time triggered horizontally

[Cassie]

Gotcha! So the demo you've linked to has all the pieces you need to figure that out. Is there something in particular you're stuck with or confused about?

There's a video about the technique if you need a little more information about what's happening in the code
 

 

[barn]

Thanks I watched the video but I'm still stucked I don't know, how I can integrate typewriter code into the container that is actually interact,

 

because if you check the codepen 

blue section, it doesn't affect isn't recognized, I assume because its nested

the vertical scroll trigger as far I understand should be in the parent scrollTrigger but, Im a noob.

 

Could you give noob proof explanation please to understand how is possible to create 

1st  vertical scroll panel trigger that is independent from the the nested ones but inside the same container

2nd nested horizontal scroll trigger that is independent from the vertical scroll panel, but dependent from the parent container

this is the vertical script that is not working

/blue section
gsap.to(".typing_text", {x: 0,
  text:"Scroll down to animate horizontally >",
  scrollTrigger: {
    trigger: ".container",
    pin: ".typing_text-heading",
    start: "center center",
    end: "center top",
    scrub: true,
    markers: true
  }
});

 

[Cassie]

I've read this a few times and I'm still finding it a bit confusing, sorry if I'm not on the right track.

Is this what you're trying to do? Trigger something inside a container?

See the Pen JjvXMWQ?editors=1011 by GreenSock (@GreenSock) on CodePen

[barn]

On 9/9/2022 at 6:44 PM, Cassie said:

I've read this a few times and I'm still finding it a bit confusing, sorry if I'm not on the right track.

Is this what you're trying to do? Trigger something inside a container?

 

Hi @Cassie as horizontal scroll trigger yes but I want to animate the typewriter effect at the first blue panel as well, when I scroll vertically into the viewport

[Cassie]

Sure - then you'll need a vertical scrollTrigger for that one, same deal, just not using containerAnimation!

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

[barn]

Thank you @Cassie, I guess start to understand , I will test in Webflow

[barn]

Hi @Cassie, if I may ask what measurement is

 

end: "+=3000",

?

-%

-vh

or

-px

and what define in this case the start/ or since its not defined is it default 0?

[Cassie]

Hiya, that's pixels, yes.

 

You can see what/where the triggers are if you add markers. In this case it's the text defined in the tween and it's triggering as soon as the top hits the bottom of the viewport. 

 

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