Jump to content
Search Community

Creating a Intro / Banner animation like this

XJoeyV 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

Welcome to the forum.

 

I'm not quite sure what we should be looking at on that website. You said you had 100 tests and revisions. Perhaps you can put one of them into a demo for us?

We don't have the resources to offer advice about entire websites, but we're happy to help if your question or problem is related to GSAP.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

 Hi,

 

Nope they are not commited or saved I worked in one file and Im now trying to reverse engineer there website.

It's about the part that is done via ScrollMagic and GSAP.

 

I mean the "Why PHPStorm" -> "ENJOY PRODUCTIVE PHP", the text and image animation are done via ScrollMagic and GSAP but I cannot figure out how due webpack and div soup. Can you give me the right directions.

Link to comment
Share on other sites

You're talking about that screen image that fades a few times as you scroll?

 

That can be accomplished with ScrollMagic pinning.

http://scrollmagic.io/examples/basic/simple_pinning.html

 

You could also use use CSS and set position to sticky.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

If you put together a starter demo, we can probably point you in the right direction.

 

Happy tweening.

 

 

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