Jump to content
Search Community

Anchor or Section launch animation ?

bstsbt 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

Hello,

I'm new user of GSAP, and I try to make a webapp projet, with animation created with GSAP.
I have not really problem for create and animate, it's a hard process to know all posibility of this tool but, is not the problem.. 

My approach is to try to launch SVG animation without hover (obviously in ipad) and without click:
- My webapp content section (fullpage.js) like : #section1 : "home" - #section 2 : "my first animation" etc... 

I see the examples : http://www.publicis90.com/#/publicis90, or that one http://www.cryptarismission.com/ on this site and it's awesome but i dont understand how can i do that..

I want said : When I change section -> my animation start. If i launch my app now.. All animation start in background and when i change #section, animation is ended.. 

I sorry for my english and my incomprehension :'( 

Thanks a lot 

B.
 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not sure I understand fully what you want. I strongly suggest that you get comfortable with the basics, especially timeline's before trying to recreate award-winning sites.

 

Both those sites use scroll events to trigger animations. The most common way to do this is to use ScrollMagic. You basically create a GSAP timeline animation and then tell ScrollMagic what animations should be triggered when certain elements enter the viewport.

 

Petr Tichy has some great starter templates

https://ihatetomatoes.net/5-days-with-scrollmagic/

and this video that explains how it works: https://ihatetomatoes.net/visual-guide-scrollmagic/

 

you can also configure navigation that will allow the page to animate to certain sections (without using the mouse).

 

Again, I'm not understanding all the details of what you want to accomplish. If you can provide a very simple demo with very basic html / css / js perhaps it will help us better understand what you need to accomplish.

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...