Jump to content
GreenSock

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

Using photographic images, in different sizes, to animate responsively to devices

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

I am converting a very old web page at https://elevatorhose.com to animate a hose image. So far, what you see is the old version.

On my local computer, I have set up different image sizes. The elevator hose image itself is a rastorized image that I have exported into different sizes as svgs. My goal is to use @media to pull in the correct size svg and then animate it using Tween Max. 
 

<img class="elevator-hose-375" src="images/elevator-hose375.svg" alt="Elevator hose customized to your specifications"/>
	<img class="elevator-hose-750" src="images/elevator-hose750.svg" alt="Elevator hose customized to your specifications"/>
	<img class="elevator-hose-1125" src="images/elevator-hose1125.svg" alt="Elevator hose customized to your specifications"/>
	<img class="elevator-hose-1500" src="images/elevator-hose1500.svg" alt="Elevator hose customized to your specifications"/>



I have looked for a solution online, knowing that Greensock is really a vector-based solution, but I would really love to use it for raster images.

 

At the moment, I am using css @media to display the correct image.

Can you direct me to the correct approach?

See the Pen by mobile (@mobile) on CodePen

Link to post
Share on other sites

How are you using @media to display the correct image? If you're using multiple <img> elements and just controlling display to show or hide then you'd need to create some conditional javascript to help select the right one for gsap based on screen size, or you could let gsap animate all the images, by just adding a common class to each for the selector. Less efficient computationally but if the animation isn't too intensive it's a simple solution.

 

You may want to look at srcset for setting img src on a single element though I think it isn't universally supported without a pollyfill.

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

 

Another option would be to set the image as a background image then @media would allow you to control the image displayed in the css.  In this case the element would have to be given size as it wouldn't take the sizing of the background image on it's own.

 

 

 

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Oh, you are a gem for helping so quickly!

 

I am using the following code to manage it through .css because it's my comfort zone. I am really focused on updating my code practices. Greensock is new to me, so I'm first trying to find solution online before bothering anyone.

 

Here's the code I'm using to manage different image sizes currently:

.elevator-hose-375 {}
.elevator-hose-750, .elevator-hose-1125, .elevator-hose-1500  {display:none; visibility:hidden}

@media all and (min-height: 768px){
	.elevator-hose-750 {display:block; visibility: visible;}
	.elevator-hose-375, .elevator-hose-1125, .elevator-hose-1500  {display:none; visibility:hidden}
}
@media all and (min-width: 1200px){
	.elevator-hose-1125 {display:block; visibility: visible;}
	.elevator-hose-750, .elevator-hose-1125, .elevator-hose-1500  {display:none; visibility:hidden}
}
@media all and (min-width: 1300px) {
	.container-fluid .elevator-image {max-width: 1500px; margin: 0 auto;}
	.elevator-hose-1500 {display:block; visibility: visible;}
	.elevator-hose-375, .elevator-hose-750, .elevator-hose-1125  {display:none; visibility:hidden}
}

 

I'm pretty comfortable with using a basic Tween to call the classes for the animation. I just learned that yesterday. 

Link to post
Share on other sites

i would create 4 divs with hidden class (or style, whatever), each with the image (only 4 images, not much to load), then add event listener to the window resize and then, depending on width, animate that div-container.. why svg?

  • Like 1
Link to post
Share on other sites

Good question, why svg... maybe not the best choice in this scenario. I am working on client websites to learn the best cases. What I learn from these will help me set boundaries for my own portfolio website. I really want to make my own site showcase GS capabilities so that I can get that kind of work.

Thinking about using the computer screen as a 3-d environment for my site from layout to interactive animation. I'm clearly not close to that. Just a goal I have on hyperdrive.

I appreciate your time today.

Link to post
Share on other sites

If you're comfortable with it @determin1st has basically described the conditional javascript approach.

 

By all means try different things and learn so have a look ar srcset.

 

Looking at your existing using display:none. Lets consider a super simple solution. Add a class to all the imgs in your html like ".animate".

Use this as your gsap selector and all instance will be animated but css determines which one will be shown. Not the best approach for highly processor intensive animation but should perform fine for light loads.

 

Or more efficiently put all images inside a parent give the parent size and animate that. For the images use css something to the effect: width:100% ;max-width:100% ;height:auto on the images let @media determine visibility.

 

  • Thanks 1
Link to post
Share on other sites

SVG, Jpg or png would all be fine. jpg probably least processor intensive.

 

1 hour ago, Yaya said:

I have looked for a solution online, knowing that Greensock is really a vector-based solution, but I would really love to use it for raster images.

 

 

GSAP basically animates any type of property you can feed it. It's not actually based on a particular image type like vectors, with the exception of certain plugins such as drawsvg. You can use it with whatever type of image you want, the browser handles the rendering.

  • Like 1
  • Thanks 1
Link to post
Share on other sites
  • 1 month later...

@determin1st I really appreciate you taking the time to code a solution! I can apply this in so many ways!

Thank you Visual-Q for your advice and help as well!

  • Like 2
Link to post
Share on other sites
  • 4 weeks later...

Thank you determin1st, this looks like a good option for people using Cloudinary.  For  https://elevatorhose.com , I ended up using the old fashioned css code and background image styles.

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

×