Jump to content
Search Community

Problem with 3D images carousel

icietla 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 try to do a 3D carousel to present team members. For this I've used some code from 

 

It works fine on Safari but I have a bug on Chrome and Firefox: images that should be behind others are in front! (see attached files, with and without the bug, the site is in private dev).

 

Do you have any idea how to solve this problem?

Thanks a lot!

post-35303-0-60701100-1452171079_thumb.jpg

post-35303-0-21639800-1452171177_thumb.jpg

See the Pen 9f62ebc0d3feb0135be3c5407e58e0d9 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hello icietla, and Welcome to the GreenSock Forum!

 

Just to clarify are you seeing this issue on Firefox and Chrome on an Apple/Mac device?

 

This could be resolved by maybe using the z-axis, opacity, z-index, another transform value, or some other CSS property to trigger that stacking context depending on what your code looks like.

 

Also do you have a codepen to share even though it is private .. maybe a reduced or limited codepen. So we can see what might be happening since it could be a number of things causing what you are seeing since i don''t see that issue in the GreenSock codepen you forked.

 

Thanks.. any additional info would be highly appreciated :)

  • Like 1
Link to comment
Share on other sites

Hello Jonathan,

 

thanks for your fast answer.

 

I have this issue

- on a recent Macbook pro with Firefox 43 / Chrome 47  

- on a PC Windows Vista with Chrome 47 / Firefox 43

 

And you're right, in the other code pen it works!!!

 

And now my preview on codepen:

See the Pen bEqXWN by icietla (@icietla) on CodePen

 

Add : and the same bug in Windows 8 and IE11

post-35303-0-18854400-1452174943_thumb.jpg

Link to comment
Share on other sites

Hello again icietla,

 

It might not be the same exact size as your carousel but this should work cross browser:

 

 

See the Pen KVmpOG by jonathan (@jonathan) on CodePen

 

I believe what was going on is that you were mixing transforms with CSS position offsets like right and top on the same to() tween.

 

It is better to use right and top in your CSS style-sheet as an initial position of your elements, and then animate using transforms. That is why you were seeing the buggy behavior in Chrome and Firefox.

 

Happy Tweening :)

  • Like 4
Link to comment
Share on other sites

Thanks for your help, your version works!

But starting with my version I can't make it works if I modifie it with some of your suggestion. It may comes from my HTML structure or my linked CSS. I will work on it and tell you when I find.

 

Thanks

Link to comment
Share on other sites

icietla, Based on your last example.. That has to do with the right:"10%", you have on your tween. In that case you should be applying the position offsets in your style-sheet. So i would move the right property in your style sheet using a class. And then just add / remove the class when needed for different page widths on load / resize.

 

This way you keep your position offsets of right and top out of your tweens. If it was me i would control the position of the container by targeting its parent and not the individual elements. This way when you position the parent it will have no bearing on its nested children, meaning the individual elements (el) transformed position.

 

And you can always try to copy / paste rebuild from my codepen from above:

See the Pen KVmpOG by jonathan (@jonathan) on CodePen

 

:)

Link to comment
Share on other sites

A copy on code pen without using right property in my tween: 

See the Pen Nxvrra by icietla (@icietla) on CodePen

And  I've commented the tweenmax.to motion. But for me it doesn't work on Chrome and now, not in Safari.

 

But if you see it on a little width size it works!

 

May be I don't understand your suggestion? Very strange...

Link to comment
Share on other sites

I meant you could maybe start a new codepen from my example.. and then slowly start wrapping your additional html markup and css. I would suggest looking at the css in my example. I notice in your codepen that doesn't work. that it is missing CSS that i have in mine. The CSS is very important.

 

As a rule of thumb its always best to first get the initial html markup and CSS setup. And then slowly add your GSAP tweens. Once the correct markup and CSS is setup then animating is much easier since all your ducks would be in a row.

 

You will notice that i am animating the div's wrapped around the <img> tags. Not to say you cant animate <img> tags directly, its just some html tags need specific CSS properties to behave and render like other html elements. I would fork my example and start adding your other elements slowly and then see what breaks and go from there.. add a little .. test.. add a little .. test

 

I think whats going on is that your relying on the bootstrap CSS. That has a lot of stuff in there that can conflict with your carousel. You would either need to take the bootstrap CSS out of the equation. Or check every inherited CSS property and rule that could be causing a conflict on each of your elements within your html markup. And override those bootstrap CSS properties, so whatever is causing the conflict in the bootstrap CSS can be squashed.

 

You have to be very careful about nesting position absolute with a parent with position absolute. You will notice in my example that i have a parent that has position relative, so i make sure that its children with position absolute are absolutely positioned relative to their parent.

 

You should always make sure that any absolutely positioned elements always have an anchor point so to speak, meaning a parent with position relative. If you keep this in mind than you will have an easier time making your animations cross browser. Since modern browsers always behave and render differently when dealing with absolutely positioned elements nested within absolutely positioned elements.

 

:)

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