Jump to content
Search Community

Question to an existing website

justin2016 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 am new in this forum and have seen the tween max the first time. Pls allow the question if the website below is made complete with this technique. I am unsure because I have seen this technique my first time and be unsure what I can do with this exactly.

Maybe the technique is used only for the intro but I am impressed by the "navigation" with the 4 images on one page and all other.

Any help and information is appreciated because unfortunately I haven't found any guidance hwo to work with this.

the page is: www.badr84hari.com

 

Thx a lot and a good start in the week.

Justin

Link to comment
Share on other sites

Hi Justin and welcome to the GreenSock forums.

 

That site is quite a punch :D. My point is that the site is not a simple one and not just one technique, soto speak, is being used. That part of the four images is a grid and then on click/touch the element expands from the position it has at the event moment. That by itself requires some JS and CSS as they're growing the element animating the width/height and possibly animating the top/left or x/y positions at the same time. Then after that animation is completed there are other images and text being animated as well. Finally, for some reason, they're using both GSAP and CSS animations.

 

FInally as OzBoz points, this is not a simple task at all and if you're not a very seasoned/experienced developer you should start with some simpler stuff and then take them up a notch until you're able to build something like that. My approach to complex animations and layouts is always start from the barebones with no animations whatsoever. Then start with simple animations and then start creating the more complex stuff. Also I would strongly recommend using Git for those cases, as you can comment your versions and tags and then go back to a previous version without any problems. Before I started with Git, I found myself in the position of not knowing which version I had to go back in order to correct some issue and with a bunch of folders and with the need of creating long readme files in order to get some order in my developments.

  • Like 4
Link to comment
Share on other sites

Hello,

I am new in this forum and have seen the tween max the first time. Pls allow the question if the website below is made complete with this technique. I am unsure because I have seen this technique my first time and be unsure what I can do with this exactly.

Maybe the technique is used only for the intro but I am impressed by the "navigation" with the 4 images on one page and all other.

Any help and information is appreciated because unfortunately I haven't found any guidance hwo to work with this.

the page is: www.badr84hari.com

 

Thx a lot and a good start in the week.

Justin

Hi, maybe you trying to make text animating like on the site?

Here i did for my project, http://dalisoft.github.io/Unim.js/demo/sequence.html. Use it with source.

NOTE: GSAP can do this + can do anything, that needs on the Web animations. I highly recommend in there and my project header to use GSAP for High-performance + Stable animation (no fps drop) and Limitless feature.

 

Thanks.

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