Jump to content
Search Community

Tweening Advice Required

flexnewbie 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

Hi,

 

I need some advice and I hope you guys can help.

 

Please view the demo before proceeding.

 

I have a number of tiles. On each tile you can view 1 of 2 things, some info and some personal details. When selecting the info button it will take you to the info panel, when selecting the person button it will take you to the person panel. I need a way of going from the person panel to the info panel and vice versa. To be clear here's the flow:

 

tile -> info -> tile

tile -> person -> tile

tile -> info <--> person -> tile (not implemented)

tile -> person <--> info -> tile (not implemented)

 

The questions are:

 

1. I need a way to go from the person panel to the info panel  and back again - what's the best approach, can it all be kept in the same timeline?

 

2. The transitions could be improved but I am stuck with IE10 so I can't use

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

any suggestions on how to do things differently?

 

What I've done is a good starting point but it's no where near right.

 

Cheers,

 

Paul

 

 

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

Link to comment
Share on other sites

Hello flexnewbie, and Welcome to the GreenSock Forum!

 

I just tested that

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

and it works in IE10 and IE11.

 

But your codepen example looks like it is throwing warnings in codepen. I could not getting it to run

:

Content Security Policy: Failed to parse unrecognized source default-src

:

Do you see the warning in the browser console?

:

Link to comment
Share on other sites

No I don't get any issues/errors in CodePen whatsoever. I'm somewhat concerned you get errors and I don't. I've tested it in Chrome and FF and no problem. 

 

I've just created a new account or so I thought and it's allocated me an account from one I created in 2008. I was a Flex developer back then hence the name flexnewbie - I'm now Javascript developer so it's no longer relevant. I guess you recognised me from my email address which hasn't changed.

 

Anyway, the reason I said it will not work in IE10/11 is because of this: http://caniuse.com/#search=css3it clearly states:

 

"Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements."

 

On line 3 (JS) of 

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

 is has: TweenLite.set(".card", {transformStyle:"preserve-3d"});

 

Therefore I naturally presumed it wouldn't be compatible. I must admit I haven't tested it in an IE. I'll take your word that it works which is great news.

 

Cheers,

 

Paul

Link to comment
Share on other sites

Also keep in mind flexnewbie, that even though transform-style: preserve-3d is not supported in IE.. you can get a round it by adding transformPerspective and animating each element seperatly.

 

And if you look at the IE MSDN Transforms docs  (scroll down to transform-style):

 

http://msdn.microsof...9(v=vs.85).aspx

 

On the above Microsoft's Transforms link, Microsoft states:

 

"At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

 

So there is a workaround..  for modern browsers that do support transform-style: preserve-3d, you instead apply the CSS perspective function to the cubes or faces parent. But for IE10 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function.

 

See this GreenSock forum topic:

 

http://greensock.com/forums/topic/8231-animation-of-3d-cube-in-ie10-working-with-css-but-need-help-to-convert-to-gsap/?hl=cube

 

I made an example 3D cube using CSS animation and transform perspective, that does work in IE10 - IE11

 

Test this below link in IE10 - IE11:

 

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

 

And here is a 3D cube animating on Y-axis only using GSAP (test in IE10 or IE11):

 

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

 

So for IE10 - and IE11 you have to do extra work when dealing with 3D transforms. But it can be done ;)

 

If you look at this link you will see 3D transforms are supported in IE10 and above.. but stupid IE hasnt given us support for transform-style: preserve-3d

 

http://caniuse.com/#search=3d%20transforms

 

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Hey,

 

I hope you can view my latest CodePen: 

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

- it works great on Chrome & FF so far.

 

I need some advice on how I can go from 'info' to 'person' on the same case tile and vice versa. The advice I need is how to structure the HTML to allow this transition.

 

Any pointers would be very helpful.

 

Cheers,

 

Paul

Link to comment
Share on other sites

Hi Jonathan,

 

Thanks for the quick reply.

 

Essentially I want a shortcut whereby I can go from looking at 'info' to 'person' and vice versa.

 

At present we have this:

 

case <-> info (case to info and back again)

case <-> person ( case to person and back again)

 

What I would like is this:

 

case <-> info <-> person <-> case

 

You can read this left-to-right and right-to-left.

 

Does that make sense?

Link to comment
Share on other sites

Hi Guys,

 

I'm not sure how to do this but is there a way to only have a single timeline in my demo, for example I'm creating two timelines where one would be better.

 

timeline = new TimelineMax();

 

and

 

tl = new TimelineMax(); // I would like to remove this one

 

The tricky part is when doing a timeline.reverse() after toggling between info and person a number of times, I wouldn't want to see all of that toggling whilst the animation is reversing.

 

Any ideas would be greatly appreciated.

 

Cheers.

Link to comment
Share on other sites

I want to simplify what I've done and I'm convinced I can do it using a single timeline and maybe use a label.

 

Having two timelines is introducing bugs.  To reproduce do the following by selecting the same case each time:

 

info > person > exit > info ( select info on the same case as before)

 

As you can see it's vanished :-(

 

This wouldn't occur with a single timeline. I can put in a fix but it's going down the wrong path.

 

I'm actually using the function you kindly provided.

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