[Rotation horizontal scrolling]

 

Thank you very much for responding so quickly. Sometimes four eyes see more than two. It was a silly oversight and with a very easy solution. This forum is the best.

I know ScrollSmoother it's better than  Locomotive but it's not free and I can't afford it.

Gsap has revolutionized the creation of websites. I remember when I got certified in Flash and Actionscript was the only creative solution, but Gsap is lighter and provides unique creativity. 

I think you provide greate resources and tutorials with a good documentation. There are things that webgl can do better, but are two different things.

Thanks!!

 

[Rotation horizontal scrolling]

Hi there!

I am developing a site that needs rotate an element while scrolling horizontally. The scrolling works fine, but I have no idea why these elements doesn´t rotate.. sure it´s an obvious thing I can´t see.

Any help or aproach will be appreciate it

See the Pen YzjEqyP by charlyta (@charlyta) on CodePen

[Fixed header with scrolltrigger]

Hello there!

 

I am really impressed by your answers. Thank you very much to everyone for your help. It is a great step to develop my ideas with GSAP in my new projects. The solution has become very clear to me now. Thanks again!!🙂

[Fixed header with scrolltrigger]

Hello there! Thanks for the example. Very clear!! I understand that using different libraries is more complex. Could I use in your example use ScrollTrigger.isScrolling( ) to apply a class to the aheader while scrolling or is not the best way to do it?

 

Thanks akapowl!!

[Fixed header with scrolltrigger]

Hello!

I have read all the posts about this question but didn´t solve my problem about getting the header fixed while scrolling. I am using Locomotive too because I have no money to get somoothscroll.. sorry for this. Any help will be really appreciate it. 

I have tried adding class, etc. without result..   

 

See the Pen poKaLQW by charlyta (@charlyta) on CodePen

[PositionInViewport to update data path of SVG with scrolltrigger]

It's really amazing!!

Thanks Cassie!! 😃

 

[PositionInViewport to update data path of SVG with scrolltrigger]

 Hi Cassie!

 

This SVG is positionated on the top of a div to be transformed from a line to a curve while scrolling. You could see an example here of what I mean:

See the Pen ZyZWVZ by armantaherian (@armantaherian) on CodePen

 

Sorry if I explain it not clearly 

 

 

[PositionInViewport to update data path of SVG with scrolltrigger]

Hi!

I want to update the path pf a SVG while scrolling. I supose that I have to use 'PositionInViewport'.  I have seen an oficial GSAP example form Codepen explaining 'PositionInViewport' and  'isInViewport' here: 

 

My Codepen trying to perform this is: 

See the Pen mdxLZPg by charlyta (@charlyta) on CodePen

I tried to update the value of data path in this way:

 

gsap.to(curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + myposition + " 0 300 L 0 0 L 800 0 L 800 300 Z")
      );

 

Where 'myposition'  is from: let myposition = ScrollTrigger.positionInViewport(box, "center").toFixed(2);

 

The question is: How to get the position to pass this var to the path.

 

Thanks in advance

positionInViewport:

Scroll down

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

[Empty Blank space below div]

Thanks a lot, Dipscom!! and sorry...

[Empty Blank space below div]

Hi Dipscom!

 

Yes! You are right!

I want the scrolling to be smooth. Now I am using Gsap and TweenMax in my example. There is the same error and blank space

 

[Empty Blank space below div]

Thanks Dipscom!

 

I only want to achieve a simple scroll using grid.. this is my ultra simple example in codepen. As you could see there is ever a blank space below the div.. (see the new codepen above) Thanks!!

[Empty Blank space below div]

Thanks for your fast response Dipscom!

I have simplify the code and I can see that this problem appears using locomotive too, so I supose there is something wrong abot the css using grid.

Thanks

 

[Empty Blank space below div]

I know that problably is a repeated question but I don´t understand why appears a great blank space bellow a div when scrolling. 

Is it more of a styling issue?  Any help would be appreciated.

Thanks in advance.

See the Pen PoRjmda by charlyta (@charlyta) on CodePen

[Visibility and Scroll not working]

Thanks for your response, it has been very useful. I have notice that my first code works fine with previous resize of the screen.

I will use your code to test where is the problem. 

;)

[Visibility and Scroll not working]

Hi OSUblake,

 

I want to show my hidden div with display:none and opacity:0 becomes visible. This hidden div will be showed from an option link of my main menu. I have set the right code in jquery, but the div is not displayed. It is because there is an error in my gsap code?

 

This an example of what I mean: 

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

Thanks

[Visibility and Scroll not working]

Hello and thanks in advance.

 

I am trying to show a hidden div that scrolls from my main menu. It is not working even I changes the opacity, display or visibility options. 

Any suggestion will be really apreciated.  

See the Pen oNpKwvy by charlyta (@charlyta) on CodePen

[Getting the data attribute to display div]

I must to refresh my knowledge so! 🧐 Thanks for the appointment

[Getting the data attribute to display div]

Hi @OSUblake

 

Yes! Thanks by your lesson! I think this line have to be mentioned in Gsap tutorials or documentation: 

 gsap.to(`.article[data-number="${number}"]`,

 Thanks for your really apreciate help!

[Getting the data attribute to display div]

Thanks Cassie for your fast response and for the demo. I have modificated my first example to show what I need. Thanks!!

[Getting the data attribute to display div]

Hello. It´s my first animation using Gsap trying to understand and recreate in my own way an example that appears on tympanus. 

I would like to know what is the better way to show a div based in data attribute.  In my example always shows the same div but the data is different. 

Any help will be really appreciate.

See the Pen abwgGjK by carlos-turpin-trives (@carlos-turpin-trives) on CodePen

[Split text menu animation in different directions]

Hello! It´s the first time I use Gsap, so I´m sorry if the question it´s very basic. I have seen this example in tympanus but I don´t understand how moves the text elements in differents directions. I have tried in css and jquery without result: https://tympanus.net/codrops/2021/06/23/inline-to-menu-link-animation/ Any aproach would be really apreciate.

The question, if you don ´t want to see the link, is how to move the words of a text in differents directions. Thanks for your help!