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

[Yaya 4 Likes (Newbie)]

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

[Visual-Q 586 Likes (Leader)]

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.

 

 

 

 

[Yaya 4 Likes (Newbie)]

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. 

[Yaya 4 Likes (Newbie)]

I have not tried srcset from https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/  but will give that a go!

[determin1st 11 Likes (Newbie)]

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?

[Yaya 4 Likes (Newbie)]

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.

[Visual-Q 586 Likes (Leader)]

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.

 

[Visual-Q 586 Likes (Leader)]

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.

[determin1st 11 Likes (Newbie)]

See the Pen NzzYXB?editors=0110 by determin1st (@determin1st) on CodePen

 

some example..

 

 

 

 

 

 

[Yaya 4 Likes (Newbie)]

@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!

[determin1st 11 Likes (Newbie)]

with some new specs, you can do:

 

https://github.com/eeeps/eleventy-respimg

[Yaya 4 Likes (Newbie)]

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.

[determin1st 11 Likes (Newbie)]

you can also try: https://css-tricks.com/almanac/properties/o/object-fit/