[How to animate the heading and paragraph without affecting on other section]

@akapowl, Thanks for reply, Let me watch this video.

[How to animate the heading and paragraph without affecting on other section]

Hello,

I am learning scrolltrigger, I am trying to animate the heading and paragraph but it's not animating, sometimes when reload the page then it's already showing the  inline css.

 

This is the basic example I am trying to learn. I check this video  https://greensock.com/docs/v3/Plugins/ScrollTrigger .

 

 

Would you help me out how to animate the heading and paragraph without affecting on other section?

 

See the Pen WNGKrVd by Narendra_verma (@Narendra_verma) on CodePen

[Stragger not working]

@akapowl,   I hadn't known about the invisible part. Yes, it's working. Thank you so much.

[Stragger not working]

Hello,

 

I have a simple code and I have to use stragger. I have to display the each box one by one. I don't know where is the issue with my code. I checked the videos and refer this link https://greensock.com/docs/v3/Staggers  .

Inline css is displaying even I set the delay also to check.

 

Would you help me out where is the issue?

See the Pen rNMKrRY by Narendra_verma (@Narendra_verma) on CodePen

[Scroll pining layer not working in mobile device as in desktop]

I tried fullpage. I am getting some issues in mobile so  I asked question on stackOverflow https://stackoverflow.com/questions/64987158/responsive-code-is-not-working-in-moible-with-fullpage-js/

 

I know this is not your product but in the both the case I am getting issue in mobile only.

[Scroll pining layer not working in mobile device as in desktop]

@ZachSaucier, Yes I checked with fullPage but there are issues with fullPage. It's not working on mobile device properly. I mean there are some issues with text in mobile.

 

That's the reason I am using above codepen code but that is also the issue

[Slider to work with tweenMax for better slides animation]

any more help in this?

[Scroll pining layer not working in mobile device as in desktop]

Hello,

I am using below code pen.

 

There is no issue in the desktop, Even desktop mobile responsive is also working. Now I checked in my iPhone 6s Safari browser and when I swipe up the first time then it's continue scrolling till the 4th slide and wait for 1-2 sec and going up till 3rd half.

 

It's not working in mobile device as  in the desktop. Can you please check it once in mobile device?

 

 

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

[Slider to work with tweenMax for better slides animation]

@mikel I am using below codepen link

See the Pen ExyBbqP by Narendra_verma (@Narendra_verma) on CodePen

 

It's not working on mobile device. I mean  I am getting the last 3 images half.

[Slider to work with tweenMax for better slides animation]

@mikel, Is it the same code you used? I am using iPhone 6s and  I checked on safari.

[Slider to work with tweenMax for better slides animation]

@ZachSaucier I am using mikel codepen link

See the Pen QWLJLgM by mikeK (@mikeK) on CodePen

 

 

First 3 images are displaying perfectly but Last and second last image is not displaying full. This is my mobile screenshot.

[Slider to work with tweenMax for better slides animation]

On 9/19/2019 at 5:34 PM, mikel said:

Hey @hybreeder,

 

Sorry - I forgot to mention that 

http://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js

is required.

 

 

 

 

Have a nice day ...

Mikel

@mikel 

I am getting one issue after one year. It was working perfectly on mobile but don't know why it's not working now.

My issue is in mobile, I am not getting the last 2 slide image full-screen on my mobile.

 Can you help me out with this?

 

 

 

 

 

[How to scroll the horizontal in scrolltrigger once scroll]

@mikel, Yes, This time it's working perfectly. Thank you so much for I really appreciate your help and support.

[How to scroll the horizontal in scrolltrigger once scroll]

@mikel, Thanks you so  much for the reply. Yes, I am looking for the same and I implemented your answer with my code.  My only issue is, end section is also scrolling before end the horizontal scroll.

 

I tried to add the  endtrigger but it's not working.

endTrigger:".bg_black",

 

See the Pen eYZXygp by Narendra_verma (@Narendra_verma) on CodePen

[How to scroll the horizontal in scrolltrigger once scroll]

@mikel, @ZachSaucier Can you help me out how to use more then one horizontal slide?

 

I have only one section and inside that section i have min five horizontal slide.

[How to scroll the horizontal in scrolltrigger once scroll]

@ZachSaucier, Thanks for the help, I can understand that here are lot's of thread and you have to reply on each. I am really appreciate help and support.

About my issue,

I am already using the toArray which i added in the codepen  while asking the question. I also added the reference codepen. @mikel suggested me for horizontal slider but that is only one. So definitely i will ask how to add second one?

It's will be more helpful  if someone help me what is the issue with my code.

 

[How to scroll the horizontal in scrolltrigger once scroll]

@mikel, How can I add another horizontal slider? I change the fromRight id to class.

 

I have only one section and inside one section i have min five horizontal slide.

 

<section>
  <h1>Section 01</h1>
</section>

<section id="sec02">
  <h1>Section 02</h1>

  <div class="fromRight">
    <h1>from Right one</h1>
  </div>
 
  <div class="fromRight">
    <h1>from Right two</h1>
  </div>
 
</section>


<section>
  <h1>End</h1>
</section>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<script type="text/javascript">
    
gsap.set('.fromRight', {xPercent:100})

var action = gsap.timeline({
  scrollTrigger: {
    trigger: "#sec02",
    pin:true,
    scrub:0.3,
    start: "top top",
    end: "+=1500"
  }
})
.to('.fromRight', {xPercent:0, duration:2})
.to({},{duration:0.5}) // an empty tween to generate a pause at the end
</script>

 

[Expected animation on working when section comes on the viewport while scrolling]

@akapowl, Yes, Thanks for the information.

I added the parent class of the section. I don't know it's correct or not but it's working for me.

 

For Second section

t1.from(".blueBox_gsap .heading h2", { duration: 1, opacity: 0})
    .from(".blueBox_gsap .heading p", {duration: 1,opacity: 0});

For Third section

t2.from(".redBox_gsap .heading h2", { duration: 1, opacity: 0})
    .from(".redBox_gsap .heading p", {duration: 1,opacity: 0});

 

[How to scroll the horizontal in scrolltrigger once scroll]

@mikel, Thanks you for the answer.

 

Two things

1) What is the issue with my code?

2) Is it possible to end the horizontal slide when the user scrolls once. I mean once scroll then horizontal slide start from the right and end it left side. I don't want to stop it in between.

 

[How to scroll the horizontal in scrolltrigger once scroll]

Hello,

 

I am using Wordpress and sharing my code in codepen.

I am trying to scroll horizontal but I am getting some issues. Like when I reach the  second section and scroll then my end section going up and then my horizontal scroll working.

 

I need, Like when I second section is on view port then scroll horizontal scroll from right to left.

 

 

I checked below example. But in below example. I don't want to scroll the first  "Horizontal snapping sections (simple)" and once scroll needed.

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

 

 

 

See the Pen qBZgejP by Narendra_verma (@Narendra_verma) on CodePen

[Expected animation on working when section comes on the viewport while scrolling]

@ZachSaucier, I don't know why it's not working for me. I watch the ScrollTrigger video more than 5 times but still, I am not able to understand what is the issue with my code. H2 and p tags animation not working as expected.

If h2 and p tag animation is working for the second section then I am getting issue on third section.

 

See the Pen YzqBbVo by Narendra_verma (@Narendra_verma) on CodePen

[Expected animation on working when section comes on the viewport while scrolling]

@ZachSaucier, Oh! I apologies. I don't know about the fork. I'll try this next time.

 

I watch that video 2-3 times but still, I have a questions why it's not working for me.😨

[Expected animation on working when section comes on the viewport while scrolling]

@ZachSaucier, Yes, I tried

end:"bottom bottom" 

In the second section(Blue one). When I go to the bottom then H2 and p tag animation is working but once reach at the top then h2 heading not displaying.

 

Also in the third section(Red one) is totally blank. Is there any think I missed in my codepen?

[Expected animation on working when section comes on the viewport while scrolling]

@ZachSaucier, I am tittle bit confused. Can you help me what is the issue with p tag? I mean my p tag animation still not working properly after adding the end position. Is there anything i missed?

[Expected animation on working when section comes on the viewport while scrolling]

@ZachSaucier, Yes I added the      endTrigger: ".redBox_gsap", 

 

Now the only issue is with my heading p tag.

Updated my codepen.