Jump to content


Tweening perspective-origin vs. Safari

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

tl;dr: TweenMax + Safari can't read the value of perspectiveOrigin, can set it just fine.




happy customer and big fan here.


I'm working on a project where I'm trying to tween the perspective-origin CSS property. It works just fine as long as I TweenMax.set() it, but it breaks in Safari when I change it to TweenMax.to(). Both scenarios work in Chrome.


It looks like TweenMax is unable to READ the property's current value when in Safari, which it needs for calculating the tween. It is able to WRITE the value though. If you take a look at my Codepen, switch the method to "to", move the mouse and then hold still for a bit you'll see that the value gets set to the tween's end value as soon as the tween ends. Which is also why TweenMax.set() works just fine, because it doesn't need to read a value, only set it.


Any idea how I can get around this without manually checking for browsers and juggling with vendor prefixes?


Thanks a bunch,


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

Link to comment
Share on other sites

Hi fraenzn :)


pls try this :

var poString =  x + '% ' + y + '% 0px';
Link to comment
Share on other sites

Hey Diaco,


thanks for checking it out!


Interesting, is that syntax documented somewhere? It did change something, but unfortunately it's only that now TweenMax sets the starting value to 50% 50% on every Tween instead. What I want is the current value at the beginning of the tween.


I did some digging: TweenMax seems to convert the property to "-webkit-perspective-origin-x" and "-webkit-perspective-origin-y" behind the scenes, and tweening those directly seems to work where tweening -webkit-perspective-origin doesn't. Strange.


So for now I'm doing this, which is unfortunate, but does work in both browsers:

if (this.$options.isSafari) {
    gsap.TweenMax.to(this.$el, 0.7, {
        "-webkit-perspective-origin-x": x + '%',
        "-webkit-perspective-origin-y": y + '%'
} else {
    gsap.TweenMax.to(this.$el, 1, { perspectiveOrigin: x + '% ' + y + '%' });

I wish there was a better way of doing this, but it seems that the perspective-origin property is somewhat of an edge case for GSAP?




Link to comment
Share on other sites

Hmm , i see... !


for now pls try this :

var size = {width:600,height:400} , End = {x:50,y:50} ;
container.addEventListener('mousemove', function(event) {
  var x = (event.offsetX / size.width) * 100 , y = (event.offsetY / size.height) * 100 ;
     TweenLite.set(container,{perspectiveOrigin:End.x+'% '+End.y+'%'})

See the Pen GJybRR by MAW (@MAW) on CodePen

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.