[animate elements with matrix3d]

Hey Beka,

 

Welcome to the forum. You could achieve these effects using a combination of 3d transforms as explained in the CSS Plugin docs:

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

and using ScrollTrigger

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

If you're new to GSAP you may want to check out the getting started section to begin with:

 

If you had code you need assistance with please make a codepen so we can see what's up.😐

 

[Delay the second timeline]

I believe removing the parenthesis will prevent the middle function from being invoked immediately.

 

You also have some scoping issues, so something like this might point you in the right direction:

 

See the Pen RwVLmBJ by Visual-Q (@Visual-Q) on CodePen

[autoAlpha issues]

I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline:

 

tl2
  .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 })
  .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })

 

[I would like to do that navbar animations with ScrollTrigger]

You can do something like this, if you don't want css transitions you can replace them with gsap animations the principle is the same either way.

 

https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

[Upgraded from 2.0.2 to 3.7.0]

Hey Hardya,

 

Check out the new install page https://greensock.com/docs/v3/Installation#CDN

 

I believe tweenLite/max and the others are combined into a single core build which is just gsap now.

[Liquid Particles Animation, Liquid Image hover]

I'm not too familiar with particle animation but maybe these libraries would be useful:

 

Particle js looks interesting.

 

https://vincentgarreau.com/particles.js/

 

and I think threejs has particle systems as well:

 

https://threejs.org

[Smooth scrolling]

And have a look at this pen for a smooth scrolling solution together with scrollTrigger

 

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

[The code works normally on codepen but locally nothing works " ScrollTrigger"]

What does the console say?

[Is there a way to Seamlessly Vertically loop 1 image infinitely]

@PointC has a very simple solution for this that clones and loops an element. The example shows text scrolling horizontally but you should be able to set it up to scroll vertically with an image.

 

See the Pen ExgExxL by PointC (@PointC) on CodePen

 

 

[Achieving a better scroll effect]

Hey Ak, unless I'm missing something I think you are indeed comparing Apples to Green Socks. The link example you give actually scrubs through a sequence of images like a video, not really parallax.

 

These threads might help point you in the right direction, search the forum there might be some others.

 

 

 

[Horizontal parallax triggered by scroll]

Hi Maelle,

 

Welcome to the forum, building out custom examples for requests is a bit beyond the scope of the forum but of course anyone is welcome to assist with that if they want to.

 

It sounds like you've already made a start, so if you can create a codepen of where you're at it would help a lot.

 

I'm not a Vue guy so someone else would have to advise about that. As far as the parallax goes the best place to start is probably just to create a timeline animating the elements and adjust the speed of the elements till the timing of everything looks good. Then you'll want to explore controlling it with scrollTrigger likely using a combination of pinning and scrubbing.

 

Hope that helps point you in the right direction.

 

 

 

[Do i need to include scrolltrigger and scrollto plugins along with gsap?]

12 hours ago, Rajan said:

May be  similiar to pricing page in any other website we see, that would be more easy to find. 

 

I think I'd have to agree with this, I know myself I have to evaluate a lot of plugins in the wordpress work I do and the fist thing I look for is a pricing page to find out what's what. In virtually every such page I've seen there if there is a free option/version it is always highlighted.

 

I might suggest going to four columns and adding a panel specifying that the core engine is free. As far as Club Greensock goes you could  preserve brand equity just fine and make it easier to understand if you just changed the menu link to Club GreenSock Pricing.

[ScrollTrigger timeline for multiple horizontal scroll]

I'm sure someone can come along to help you set this up better as I haven't had much time to spend with scrollTrigger yet but I think I can shed some light on what's happening, your start and end positions for the divsOne and divsTwo are in the same place and not accounting for the elements being in different positions, you can see this if you show markers on the divsTwo in your pen the starts and ends have already come and gone before the elements are even on the screen.

 

In this pen I accounted for the divsTwo position after the first section's pin spacer. I don't say this is a good solution for this, just illustrating what's happening.

var parentOffset = chOne.scrollWidth - document.documentElement.clientWidth + window.innerHeight;


start: () => parentOffset + start + (elWidth * 0.5),
end: () => parentOffset + start + (window.innerWidth),

 

 

See the Pen poeLdRd by Visual-Q (@Visual-Q) on CodePen

[Infinity translateX an object]

Check out this post  @PointC has a very clever implementation of a similar infinite scroll using cloned node.

 

 

[Growing in skills but but still feeling green, get it? Green?]

Love it. Great Job!

[ScrollTrigger with hiding browser interface on mobile]

I would think If the height is known at the start and it's a mobile device where you won't manually change screen size you could store it as a flag variable at the start and key the heights the elements to that value rather than a dynamic screen height. I think Jack alluded to that.

 

One other idea is to calculate all height based on a ratio of screen width i.e. the vw unit. This is  great way to maintain the aspect ratio of elements. This won't scale dynamically to fit a screen height but it will retain the relative size and aspect ratio.

 

This article might help too.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

[Is there an example of how lagSmoothing() should be used with TimelineLite?]

Have you looked at the docs page for this:

 

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

There is really good video about how it works and a lot of information about the ticker. 

 

From the docks it looks like lagsmoothing is a method on the ticker (global timeline) not on individual timelines  though maybe there are other implementations I'm not sure.

[ScrollTrigger video taking up whole website]

I was referring to the codepen. 

 

On your site:

Re the video I'm a little confused what to you want it to be doing, currently it's sitting up at the top overlaying everything because you have position fixed on it. If you want the video to sit in its container try setting the video to:

position: absolute
 

and add to the row that contains it:

position: relative

 

At this point containing row with the absolute child element has no inherited height, if you want to set this and have video overflow hidden give it a height and set it's overflow properties accordingly. such as:

 

height: 50vh;
overflow: hidden;

 

Then I suppose you'll have to adjust how you have the scrollTrigger setup to make it react at the appropriate time. 

 

 

[Multiple Parallax Effects within ScrollTrigger Target]

I cranked up the value to 1 to see it better and it seemed smooth enough to me at least within the limits of a normal wheel scroll, the only thing I can think of to smooth it out more would be a smooth scroller on the page.

 

Are you seeing substantial jank in the parallax itself or just talking about the page scroll with a mouse wheel?

[Learning]

Good job @jnutt367 keep at it you'll be a pro in no time!

And welcome to the forum.

[Anchor link and section with pin]

Hi nurlan,

 

Welcome to the forum, if possible please make a simplified example of the issue on codepen so we can have a look. It's very difficult to troubleshoot a live website.

 

[ScrollTrigger video taking up whole website]

Check the console...

404 error on the video (Failed to load resource: the server responded with a status of 404 () } and I don't think you have gsap  loaded (Uncaught ReferenceError: gsap is not defined)

[Question about dynamic tweens and GSDevTools]

Query 2: I'm not sure if there is any more updated info but this post contains info  on using with dynamic content:

 

 

[Horizontal scrolling content not working correctly]

 

1 hour ago, PointC said:

For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.

 

Such a simple way to create a looping Carousel. Thanks for posting that Craig, I missed it the first time around.

 

 

[.fromTo starting from 0 instead of passed value when >1000]

I bumped you...

 

Note it helps a lot if you simplify things and explain how it works. It's a bit much to expect people to first figure out how your project works in order to help you.

 

I'm not sure what the issue is but if anyone wants to take a run at this the code you need to pay attention is at the end, it animates a fromTo of innerhml between two supplied values.

 

Onupdate it formats the value presented in the innerHTML using the functions at the end.

 

To make it work shift the semester hours right to a value in and select an option  above and it counts out values,  if the starting value is in the thousands has an "," the formatted numbers restart from O. You can see in the unformatted values that it counts accurately between the supplied values so something in the formatted return is causing gsap to count from 0 instead.

 

Clear as mud.

 

See the Pen NWdbpww by Visual-Q (@Visual-Q) on CodePen