Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bstsbt

Anchor or Section launch animation ?

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.
 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×