[Smooth scroll for large image(i tried the tricks)]

Thanks for input, I originally tried with x and then moved to left for covering all options.

 

I also just updated to latest lib without any performance notice though thanks for catching that.

 

Do you think the only way to fix this would be to do this on canvas?

 

 

[Smooth scroll for large image(i tried the tricks)]

Hey guys,

 

I was wondering what is the best way to get most performance for side scrolling a good sized image. Ive tried the rotation-z and z micro degree with no success. As well as trying both x and left. and force 3d. It is extremely jittery when using gsap. The best performance I can get is with a pure css anmiation:

 

@-webkit-keyframes bg-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-1198px); }
}

 

I have a 300x600 div with overflow hidden and a 1300x300px image I want to tween to the left within that 300x600 container.

 

Let me know if you have any suggestions.

 

CODEPEN:::::

CSS ANIMATION -- 

See the Pen XGyPPZ by anon (@anon) on CodePen

 

GSAP ANIMATION--

 

See the Pen ywQxqb by anon (@anon) on CodePen

 

Thanks

 

See the Pen ywQxqb by anon (@anon) on CodePen

[Tweening scale jumps at end]

ah ok, are you saying with something like an addClass in an onComplete function?

[Tweening scale jumps at end]

Thanks for input Jonathan, I will working on creating a demo in CodePen.

 

I also thought that it could be background-size forcing to whole px values so I used the RoundProp plugin and that did not help either.

 

On your second suggestion, are you saying use the actual css file for setting image at 80%? or Using tweener to tween background-image to 80% because I am already doing that.

 

Thanks

[Tweening scale jumps at end]

Hey all,

 

I was hoping someone could help with an issue I am having on tweening scale of a div that has a background image.

 

The problem is that at the last moment the graphic snaps to this ugly blurred version. It looks good all up until that last moment. Does anyone have suggestions on how to handle or how to produce best experience? 

 

You can see super simple demo here(check view source, js/css is coded in html header):

 

http://mistersaisho.com/rae/scaleTest/test.html

 

They both have mousexover/mousexout listeners that adjust scale. Over it goes to 100% and out it goes to 80%.

 

Top is effecting background-image and bottom is doing strait scale. 

 

 

I was thinking swapping with another image after the ween that would be at the smaller size though 100% however, I am trying to save as much k weight as possible.

 

Thanks!

 

 

**HAHAHAHA - I just got this error when submitting "Sorry, an error has occurred. Your topic contains the following suspected spam word, SExO" and it was because mousexover and mousexout(without x) were the issue

[kb weight not accurate]

I was not clear on that thanks for helping understand. Looks like I need to keep as is or push to allow linking to server.

 

Thanks again for everyones help.

[kb weight not accurate]

Thanks for responses everyone. I am working on a project that needs all files saved locally. Would there be a way to save the libs in gzip format and have a loader like yepnope.js that can extract?

 

Thanks!

[kb weight not accurate]

Hello, I am trying to use TweenLite and the CSS plugin. On the download area it says TweenLite is 7kb and that the css plugin is 12kb. When I download the files locally and save to a .js file I get 23kb for TweenLite and 31kb for css plugin.

 

What do I need to do to get the kb as displayed? Or is that information incorrect?

 

Thanks!