Jump to content
Search Community

Any tutorial to learn making website animation transition like 7up.nl?

Animatist 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

Hi and welcome to the GreenSock forums,

 

http://7up.nl/7up is very well done. Reminded me of some of the animations (style, speed, wonder) found in: http://www.shanemielke.com/archives/usopen-sessions/

 

The secret to these amazing sites has 2 parts. GSAP for animations and PIXI.js for high-speed canvas rendering.

Instead of animating a bunch of css properties of divs they are using GSAP to animate properties of objects / images created with Pixi.

 

The site you referenced was built by people who have mastered both GSAP and Pixi. I'm really not sure there are any tutorials that are going to work as shortcuts to those types of effects. I don't know your experience level but I'd strongly recommendation building a foundation of the GSAP basics first.

 

Blake who helps moderate these forums does some very impressive work with GSAP and Pixi check out some of his work here:

See the Pen ?q=pixi&limit=osublake by search (@search) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Rick is using Three.js: https://threejs.org/examples/#webgl_lines_sphere 

Lots of folks pair it with GSAP. GSAP can tween any numeric property of any javascript object so it works very well with other libraries like Pixi.js and Three.js.

 

For instance in the demo below, very basic TweenMax code is used to animate the z of each cube and also the position of the camera:

TweenMax.staggerFrom(cubePositions, duration, {
    z: 30,
    ease: Elastic.easeOut
  }, 0.03);
  
TweenMax.from(camera.position, duration, {
    z: 100,
    x: 500,
    ease: Power2.easeOut,
    onUpdate: function () {
      camera.lookAt(scene.position);
    }
  });
};

 

See the Pen ojQymY?editors=0010 by Siilwyn (@Siilwyn) on CodePen

 

  • Like 2
Link to comment
Share on other sites

HI Noeyeat, Welcome to the GreenSock forums.

 

In such a case as this it would be better to start a new topic. That said, I'm really not sure what section you are talking about on that site. Perhaps a screenshot would help. As an award-winning site, the effects are fairly complex, so we may be limited in how much we can dissect that site and advise. Perhaps after we know exactly what you are asking about we will have a better idea.

Link to comment
Share on other sites

14 hours ago, Carl said:

HI Noeyeat, Welcome to the GreenSock forums.

 

In such a case as this it would be better to start a new topic. That said, I'm really not sure what section you are talking about on that site. Perhaps a screenshot would help. As an award-winning site, the effects are fairly complex, so we may be limited in how much we can dissect that site and advise. Perhaps after we know exactly what you are asking about we will have a better idea.

Thanks Carl,

 

I've created a topic right here: 

I've also posted some pictures to demonstrate my point.

Link to comment
Share on other sites

  • 2 weeks later...
On 6/22/2017 at 3:01 AM, Animatist said:

Do you think the js file of 7up website is generated by some kind of software? or typed by programmer?
https://www.7up.nl/js/build/final-8bc1daa678.min.js
because the code seems so complicated and long, thanks.

 

That's a bundle of all the code and libraries used on the site, and was probably compiled using Webpack.

 

The animations were created using After Effects, and exported using bodymovin. The animations are defined in json files like this one.

http://7up.nl/json-bodymovin/home/home.json

 

Bodymovin demo.

See the Pen yapJWq by airnan (@airnan) on CodePen

 

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