Jump to content
Search Community

BEGINNER - Animation on elements when i leave the page

Alex Salicki 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 everyone , 

I would like to have animations on my elements like this website : http://www.thieb.co/works when you click on his work and when you come back to homepage.
I try with the function “ reverse “ to reverse my animations when i click to see my projects but it doesn’t work and I don’t understand why.

Can you help me ? How do you think to do that ?
Best Regards,
Alex Salicki 

Link to comment
Share on other sites

Hello, this kind of transition between pages goes a bit beyond the resources that GSAP provides.

Looking at the source code of the site you mentioned, it is worth noting that it is using a framework based on SPA (Single Page Application), to get this done you can search on some of these frameworks, these are the most used:
 - VueJs
 - ReactJS
- AngularJs.

After achieving this you can create Tweens that animate before and leave the page and animate when you enter and you will have this same transition effect.

 

  • Like 5
Link to comment
Share on other sites

Yup, Noturnoo is exactly right. That page is built based on SPA. There was a discussion about this just a few days ago: 

Hopefully some info in that thread helps. Unfortunately, there is quite a bit that you need to know beyond GSAP. 

If you make some progress and have a basic demo to show, its possible someone can help push you further in the right direction.

 

 

  • Like 4
Link to comment
Share on other sites

Thank you very much for your help ! I have a last question because I'm a Beginner. 

I have already make my portfolio on Single Page Application with NodeJs and ExpressJS. So I would like to use Vue JS as you say to me to have transitions and animations between pages and I would like to know if it's possible to use script VueJS in my .ejs templates. It's possible ? What do you recommend to me ? 

 

Link to comment
Share on other sites

Sorry, we really have to keep our support focused on the GreenSock API. We just don't have the resources to stay on top of and recommend a variety of third party frameworks. This is the first time I've even heard of ExpressJS, so again, I really can't be of much help.

 

If you are interested in using Vue and GSAP definitely follow Sarah Drashner on twitter and go through her CodePen vue animations collection: https://codepen.io/collection/XQGkeV/

 

Article Intro to Vue.js: Animations: https://css-tricks.com/intro-to-vue-5-animations/

 

@Ihatetomatoes has been creating React tutorials and promises some React + GSAP videos in the future. From what I understand most of the core concepts of React translate to vue so it might be worth seeing how React does things. The  free stuff from ihatetomatoes (Petr Tichy) is better than most people's paid training. Follow him on twitter https://twitter.com/ihatetomatoes and youtube https://www.youtube.com/channel/UC7O6CntQoAI-wYyJxYiqNUg (subscribe to his channel)

 

If you have a GSAP question and can provide a simple demo of what you are working on, there is a much greater chance that someone here can give you specific and helpful advice.

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