Jump to content
Search Community

Is this effect using GSAP?

niallmckenna test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

http://conference.awwwards.com/london-2017/

 

I love the animation effect on the above website, that kind of floating elements effect as you scroll. Is this using GSAP?

 

Having looked at the source I found that it's using it for something but not sure what, there is also a plugin called scrollMagic which could be doing this instead.

 

Your thoughts and any help would be appreciated.

 

N.

Link to comment
Share on other sites

Hello niallmckenna, and welcome to the GreenSock Forum!~
 

ScrollMagic is a scroll management tool that uses GSAP as its main animation platform. It is made with GSAP but it is not made by GreenSock. You can find more info about it here:

 

http://scrollmagic.io/

https://github.com/janpaepke/ScrollMagic

 

ScrollMagic is pretty much used by users who want an out of the box scrolling management plugin to create Parallax Scrolling effects.

 

You can also find ScrollMagic tuts here:

 

https://ihatetomatoes.net/?s=scrollmagic&post_type=post

 

:)

  • Like 2
Link to comment
Share on other sites

That effect is often referred to "parallax scrolling". Google will give you lots of results on different methods of achieving it. 

Probably worthwhile to investigate a few different ways people approach those projects just to better understand the setup and basic mechanics.

 

To get a grasp of the basics definitely check out Petr's tutorial: https://ihatetomatoes.net/a-simple-parallax-template-using-scrollmagic-and-greensock/

 

As Jonathan noted GSAP will allow you to script the animations that you want and then a library like ScrollMagic will allow you to control those animations by scrolling. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...