Jump to content
GreenSock

Acccent

Make responsive transforms with media-query-dependent values? (or workaround?)

Go to solution Solved by Acccent,

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 again :)

 

This time I'm having trouble with sliding panes, whose 'open' position depends on media queries.

 

Have a look at the pen: (thanks @Diaco who had a pen I forked to make this quickly)

 

Basically, I have a red 'panel'; when it's open, it has an x transform that makes it rest to the right of the window, but it's not fully hidden. It still has a visible part, which is dependent on the width of a child 'box'.

When you click on the button to close the panel, it slides all the way to the left, with the box still visible.

 

The problem is, the width of that box is responsive, and below a certain screen width it becomes smaller (in the pen, that is simulated with a button for convenience).

 

When the width the screen (and the box) changes, the panel animation is no longer correct. Using invalidate() doesn't work either, or at least I couldn't get it to work.

I also couldn't manage to get xPercent to work.

 

How would you solve this?

 

(Note: I'm sure I could get it to work by applying several left and right values to various elements, in various media queries, but I'm sure there must be an elegant way?)

See the Pen BowwZx by Accent (@Accent) on CodePen

Link to comment
Share on other sites

Hello Acccent, and Welcome to the GreenSock forum!

 

You can look into using xPercent and yPercent to help with responsive animations, Please look at this blog post about xPercent and yPercent:regarding responsive animation using GSAP:

 

http://greensock.com/gsap-1-13-1

 

And look at these two codepen examples with xPercent and yPercent in action:

 

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

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

 

More information on xPercent and yPercent found n the CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience.

You can also  just do a regular if statement check of the width of the window and then apply your new tweens values. Or you can use a media query polyfill like EnquireJS and place your timeline or tweens inside those media query checks to control your animation

 

http://wicky.nillia.ms/enquire.js/

// matches iPad tablet
enquire.register("screen and (min-device-width: 768px) and (max-device-width: 1024px)", {
    match : function() {
        
        // matches media query

    },  
    unmatch : function() {
        
        // does not match media query

    }
});

And you can just use EnquireJS to just add remove classes on the <html> tag depending on your media query. And then within your timeline and tween code have checks if a specific class is on the html tag exists.

 

But you can see which method works best for your animation. But definitely check out xPercent and yPercent,

 

I would stay away from animating left and top CSS properties. Best to always stick with animating x and y so you don't trigger layout recalculations in the browser. You will always get smoother animations using x and y since they can animate on a subpixel level.

 

Plus i notice you are applying your transform in your CSS. It is always best  to let GSAP apply even your initial transforms, this way they are applied cross browser and you can allow GSAP to keep track of your transforms on your elements

 

:)

  • Like 3
Link to comment
Share on other sites

Hi Jonathan,

 

I did check   xPercent   (and  yPercent , but in my case onl y x matters) but couldn't get it to work.

 

To be clear, for my needs I would indeed need to combine  x  and xPercent in an single tween; however the value of x is dynamic and  changes depending on the window or device width. Unless I'm mistaken, using checks like matchMedia or EnquireJS would allow me to define the right value on page load, but then if the user resizes their window the Timeline doesn't update its parameters...

 

(as for applying the transforms in CSS, got it, I'll change that in my code – thanks)

Link to comment
Share on other sites

Diaco, I had checked invalidate() (it was in the pen) and the two examples you posted (my pen was a fork from one of these).

 

I changed it so that it uses xPercent and the initial transform is set with a TweenMax. It does work better, but as you can see the x value in the transform is still always the same; how do I make it change depending on the window size?

 

If I do something like clear() the Timeline and add a new tween to it with the correct value on window.resize, then the Timeline's current state will be lost I believe, and the next time the user slides the panel it won't work properly...

 

edit: link for convenience

See the Pen BowwZx by Accent (@Accent) on CodePen

 

edit again: In case what I'm trying to do isn't clear or seems very complicated, here's a CSS-only version:

See the Pen dYVQPZ by Accent (@Accent) on CodePen

#panel {
  transform: translate(calc(100% - 50px), 0);
  transition: transform 0.6s ease;
}

.small #panel { transform:translate(calc(100% - 20px), 0); }

#panel.closed { transform:none !important; }
$("#slide").on("click", function() {
  $("#panel").toggleClass('closed');
})

I really want to use Greensock, but I find it strange and a shame that something so easy to do with CSS would require so much code to work with GSAP – unless I'm doing something wrong, of course...

Link to comment
Share on other sites

pls check this out : 

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

I'm afraid this doesn't work either (click slide, then resize, then slide again – it doesn't go back all the way)  but I'll try to work something out from it and let you know if I manage to get something.

 

(Feel free to post other suggestions in any case! Thanks a lot for your help :) )

Link to comment
Share on other sites

Forking Diacos helpful example.. the offset was only 50 pixel in the negative

 

I just changed the -50 on both set() to 0

 

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

 

try this now

Link to comment
Share on other sites

Well, now it's incorrect in the very first position :P the blue box is out of the 'window' there.

Link to comment
Share on other sites

  • Solution

Okay I fixed it! I just had to move tl.seek() in Diaco's pen before the TweenLite that updates the panel's position:

See the Pen WQZYaQ by Accent (@Accent) on CodePen

 

Now it all works, although to be honest I still think it's a tad complicated, but it'll do! :)

Link to comment
Share on other sites

Quick update: you can see all of the things I've posted about in action on my website, http://robin-v.net/

 

However I'd like to point out that the sliding animation that this thread was about was faster and smoother with CSS transitions, so I'm a bit disappointed. It took a lot of time and effort to make all the necessary changes and I end up with something worse :(

 

Anyway, thanks again for the help, everyone.

Link to comment
Share on other sites

Hey Acccent. Sorry to hear about the disappointment. Would you mind sharing the two versions you're comparing (the GSAP version and the CSS transitions version)? I'd really like to see the performance difference you're talking about. Most of my tests show GSAP performing better (or as good as) CSS. The only exception on some devices is transforms, but there are some other trade offs with that (see http://greensock.com/css-performance/). Again, I'm super curious to see how you're comparing things. There may be something you're doing in the GSAP version that's causing performance problems. 

  • Like 2
Link to comment
Share on other sites

Hey Acccent. Sorry to hear about the disappointment. Would you mind sharing the two versions you're comparing (the GSAP version and the CSS transitions version)? I'd really like to see the performance difference you're talking about. Most of my tests show GSAP performing better (or as good as) CSS. The only exception on some devices is transforms, but there are some other trade offs with that (see http://greensock.com/css-performance/). Again, I'm super curious to see how you're comparing things. There may be something you're doing in the GSAP version that's causing performance problems. 

 

Hi :)

Alright, I set something up. On http://robin-v.net you'll see the GSAP'd version, and on http://robin-v.net/testing the sliding transitions are only handled with CSS (on top of that, I don't load jquery.gsap.js – I thought that might slow down the parallax plugin I'm using. I don't know if it helped or not, I'm only mentioning it just in case.) Note that I put together the CSS version quickly, so some things might not be 100% identical.

 

The CSS version works more reliably and consistently, based on my testing... sometimes in the GSAP version after sliding towards one side you end up stuck there, the 'Back' button doesn't work. Sometimes the buttons on the side don't slide into view on page load. Sometimes there's quite a lot of staggering going on (especially on FF), and/or the animation speed is variable, whereas the CSS transitions pretty much always behave the same way.

 

I don't know if that will help; unfortunately I am 100% out of time and won't be able to debug that or provide a simplified codepen. Migrating to GSAP took around a week when I expected it to require two days at most, and to make things worse the reason why I did in the first place – to animate an SVG consistently across browsers – I haven't managed to do (yet). (Maybe you can't animate svg masks with GSAP?)

 

So, yeah, I'm sure the platform is very powerful, and I really don't mean to come across as just wanting to complain or bash Greensock... but to be honest, I had to learn its somewhat dense syntax (that's to be expected when you have this many features, but still), in the end my code ended up way more complicated (maybe that's specific to my case), I don't see any performance boosts anywhere and I see some degradation in some places, and the thing I wanted to do I still couldn't see how.

Link to comment
Share on other sites

It took me awhile to find which file your main code was in. I believe it is js-code-dev.js .. but cool site :D

 

The staggering or jittering in Firefox can be fixed with a slight rotation on your element rotation:0.01. Firefox has a bug in it when you try to translate elements in small increments. I would also add z:0.01 to force hardware acceleration in Firefox too, So it can make you use matrix3d() instead of matrix() on your sliding elements.

 

I noticed you have a really long gradient string. CSS properties like gradients, box-shadow, and text shadow are really expensive paint operations in the browser. Even with CSS transitions they are not smooth, especially in Firefox.

#bg1 {
  z-index: 1;
  background-color: rgba(15, 10, 30, 0.09);
  background-image: -webkit-radial-gradient(47px 64px, 1px 1px, rgba(217, 238, 251, 0.82) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(195px 52px, 1px 1px, rgba(214, 248, 255, 0.82) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(250px 32px, 1px 1px, rgba(224, 242, 246, 0.89) 34%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(359px 49px, 1px 1px, rgba(219, 240, 246, 0.99) 29%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(440px 33px, 1px 1px, rgba(218, 242, 252, 0.95) 26%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(27px 197px, 1px 1px, rgba(215, 241, 255, 0.82) 39%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(175px 117px, 1px 1px, rgba(213, 250, 255, 0.97) 21%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(242px 143px, 1px 1px, rgba(223, 250, 247, 0.87) 34%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(359px 116px, 1px 1px, rgba(213, 236, 253, 0.85) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(406px 192px, 1px 1px, rgba(225, 239, 247, 0.99) 36%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(12px 273px, 1px 1px, rgba(213, 245, 252, 0.97) 35%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(120px 245px, 1px 1px, rgba(220, 237, 251, 0.86) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(257px 296px, 1px 1px, rgba(221, 241, 248, 0.89) 21%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(367px 247px, 1px 1px, rgba(223, 242, 248, 0.81) 24%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(436px 227px, 1px 1px, rgba(219, 243, 255, 0.9) 29%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(33px 368px, 1px 1px, rgba(218, 241, 249, 0.9) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(128px 341px, 1px 1px, rgba(212, 244, 254, 0.99) 27%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(259px 334px, 1px 1px, rgba(217, 243, 248, 0.99) 30%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(315px 337px, 1px 1px, rgba(224, 245, 249, 0.98) 25%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(425px 339px, 1px 1px, rgba(219, 236, 249, 0.82) 25%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 459px, 1px 1px, rgba(217, 249, 249, 0.93) 31%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(147px 492px, 1px 1px, rgba(219, 249, 251, 0.94) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(288px 432px, 1px 1px, rgba(213, 236, 246, 0.89) 26%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(395px 481px, 1px 1px, rgba(222, 250, 255, 0.94) 22%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(443px 453px, 1px 1px, rgba(225, 248, 247, 0.84) 36%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 47px 64px, rgba(217, 238, 251, 0.82) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 195px 52px, rgba(214, 248, 255, 0.82) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 250px 32px, rgba(224, 242, 246, 0.89) 34%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 359px 49px, rgba(219, 240, 246, 0.99) 29%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 440px 33px, rgba(218, 242, 252, 0.95) 26%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 27px 197px, rgba(215, 241, 255, 0.82) 39%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 175px 117px, rgba(213, 250, 255, 0.97) 21%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 242px 143px, rgba(223, 250, 247, 0.87) 34%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 359px 116px, rgba(213, 236, 253, 0.85) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 406px 192px, rgba(225, 239, 247, 0.99) 36%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 12px 273px, rgba(213, 245, 252, 0.97) 35%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 120px 245px, rgba(220, 237, 251, 0.86) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 257px 296px, rgba(221, 241, 248, 0.89) 21%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 367px 247px, rgba(223, 242, 248, 0.81) 24%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 436px 227px, rgba(219, 243, 255, 0.9) 29%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 33px 368px, rgba(218, 241, 249, 0.9) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 128px 341px, rgba(212, 244, 254, 0.99) 27%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 259px 334px, rgba(217, 243, 248, 0.99) 30%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 315px 337px, rgba(224, 245, 249, 0.98) 25%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 425px 339px, rgba(219, 236, 249, 0.82) 25%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 1px 459px, rgba(217, 249, 249, 0.93) 31%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 147px 492px, rgba(219, 249, 251, 0.94) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 288px 432px, rgba(213, 236, 246, 0.89) 26%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 395px 481px, rgba(222, 250, 255, 0.94) 22%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 443px 453px, rgba(225, 248, 247, 0.84) 36%, rgba(0, 0, 0, 0));
}

#bg1::after {
  content: "";
  background-image: -webkit-radial-gradient(47px 64px, 1px 1px, rgba(217, 238, 251, 0.82) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(195px 52px, 1px 1px, rgba(214, 248, 255, 0.82) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(250px 32px, 1px 1px, rgba(224, 242, 246, 0.89) 34%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(359px 49px, 1px 1px, rgba(219, 240, 246, 0.99) 29%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(440px 33px, 1px 1px, rgba(218, 242, 252, 0.95) 26%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(27px 197px, 1px 1px, rgba(215, 241, 255, 0.82) 39%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(175px 117px, 1px 1px, rgba(213, 250, 255, 0.97) 21%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(242px 143px, 1px 1px, rgba(223, 250, 247, 0.87) 34%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(359px 116px, 1px 1px, rgba(213, 236, 253, 0.85) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(406px 192px, 1px 1px, rgba(225, 239, 247, 0.99) 36%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(12px 273px, 1px 1px, rgba(213, 245, 252, 0.97) 35%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(120px 245px, 1px 1px, rgba(220, 237, 251, 0.86) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(257px 296px, 1px 1px, rgba(221, 241, 248, 0.89) 21%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(367px 247px, 1px 1px, rgba(223, 242, 248, 0.81) 24%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(436px 227px, 1px 1px, rgba(219, 243, 255, 0.9) 29%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(33px 368px, 1px 1px, rgba(218, 241, 249, 0.9) 38%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(128px 341px, 1px 1px, rgba(212, 244, 254, 0.99) 27%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(259px 334px, 1px 1px, rgba(217, 243, 248, 0.99) 30%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(315px 337px, 1px 1px, rgba(224, 245, 249, 0.98) 25%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(425px 339px, 1px 1px, rgba(219, 236, 249, 0.82) 25%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 459px, 1px 1px, rgba(217, 249, 249, 0.93) 31%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(147px 492px, 1px 1px, rgba(219, 249, 251, 0.94) 37%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(288px 432px, 1px 1px, rgba(213, 236, 246, 0.89) 26%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(395px 481px, 1px 1px, rgba(222, 250, 255, 0.94) 22%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(443px 453px, 1px 1px, rgba(225, 248, 247, 0.84) 36%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 47px 64px, rgba(217, 238, 251, 0.82) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 195px 52px, rgba(214, 248, 255, 0.82) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 250px 32px, rgba(224, 242, 246, 0.89) 34%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 359px 49px, rgba(219, 240, 246, 0.99) 29%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 440px 33px, rgba(218, 242, 252, 0.95) 26%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 27px 197px, rgba(215, 241, 255, 0.82) 39%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 175px 117px, rgba(213, 250, 255, 0.97) 21%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 242px 143px, rgba(223, 250, 247, 0.87) 34%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 359px 116px, rgba(213, 236, 253, 0.85) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 406px 192px, rgba(225, 239, 247, 0.99) 36%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 12px 273px, rgba(213, 245, 252, 0.97) 35%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 120px 245px, rgba(220, 237, 251, 0.86) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 257px 296px, rgba(221, 241, 248, 0.89) 21%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 367px 247px, rgba(223, 242, 248, 0.81) 24%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 436px 227px, rgba(219, 243, 255, 0.9) 29%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 33px 368px, rgba(218, 241, 249, 0.9) 38%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 128px 341px, rgba(212, 244, 254, 0.99) 27%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 259px 334px, rgba(217, 243, 248, 0.99) 30%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 315px 337px, rgba(224, 245, 249, 0.98) 25%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 425px 339px, rgba(219, 236, 249, 0.82) 25%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 1px 459px, rgba(217, 249, 249, 0.93) 31%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 147px 492px, rgba(219, 249, 251, 0.94) 37%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 288px 432px, rgba(213, 236, 246, 0.89) 26%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 395px 481px, rgba(222, 250, 255, 0.94) 22%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 443px 453px, rgba(225, 248, 247, 0.84) 36%, rgba(0, 0, 0, 0));
}

#bg2 {
  z-index: 3;
  background-image: -webkit-radial-gradient(10px 127px, 1px 1px, rgba(221, 248, 254, 0.74) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(172px 7px, 1px 1px, rgba(220, 248, 255, 0.83) 49%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(319px 58px, 1px 1px, rgba(217, 243, 252, 0.88) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(595px 91px, 1px 1px, rgba(220, 238, 248, 0.76) 47%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(102px 267px, 1px 1px, rgba(217, 239, 248, 0.85) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(281px 178px, 1px 1px, rgba(222, 240, 253, 0.95) 45%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(421px 210px, 1px 1px, rgba(221, 248, 250, 0.77) 54%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(564px 283px, 1px 1px, rgba(219, 243, 246, 0.77) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(77px 440px, 1px 1px, rgba(218, 248, 251, 0.82) 55%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(244px 375px, 1px 1px, rgba(218, 240, 249, 0.9) 55%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(440px 400px, 1px 1px, rgba(211, 241, 251, 0.9) 60%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(597px 301px, 1px 1px, rgba(223, 246, 248, 0.91) 44%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(33px 552px, 1px 1px, rgba(214, 238, 251, 0.97) 60%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(194px 574px, 1px 1px, rgba(220, 243, 246, 1) 42%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(432px 577px, 1px 1px, rgba(211, 244, 253, 0.99) 47%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(587px 511px, 1px 1px, rgba(215, 245, 249, 0.87) 49%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 10px 127px, rgba(221, 248, 254, 0.74) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 172px 7px, rgba(220, 248, 255, 0.83) 49%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 319px 58px, rgba(217, 243, 252, 0.88) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 595px 91px, rgba(220, 238, 248, 0.76) 47%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 102px 267px, rgba(217, 239, 248, 0.85) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 281px 178px, rgba(222, 240, 253, 0.95) 45%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 421px 210px, rgba(221, 248, 250, 0.77) 54%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 564px 283px, rgba(219, 243, 246, 0.77) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 77px 440px, rgba(218, 248, 251, 0.82) 55%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 244px 375px, rgba(218, 240, 249, 0.9) 55%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 440px 400px, rgba(211, 241, 251, 0.9) 60%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 597px 301px, rgba(223, 246, 248, 0.91) 44%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 33px 552px, rgba(214, 238, 251, 0.97) 60%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 194px 574px, rgba(220, 243, 246, 1) 42%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 432px 577px, rgba(211, 244, 253, 0.99) 47%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 587px 511px, rgba(215, 245, 249, 0.87) 49%, rgba(0, 0, 0, 0));
}

#bg2::after {
  content: "";
  background-image: -webkit-radial-gradient(10px 127px, 1px 1px, rgba(221, 248, 254, 0.74) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(172px 7px, 1px 1px, rgba(220, 248, 255, 0.83) 49%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(319px 58px, 1px 1px, rgba(217, 243, 252, 0.88) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(595px 91px, 1px 1px, rgba(220, 238, 248, 0.76) 47%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(102px 267px, 1px 1px, rgba(217, 239, 248, 0.85) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(281px 178px, 1px 1px, rgba(222, 240, 253, 0.95) 45%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(421px 210px, 1px 1px, rgba(221, 248, 250, 0.77) 54%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(564px 283px, 1px 1px, rgba(219, 243, 246, 0.77) 57%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(77px 440px, 1px 1px, rgba(218, 248, 251, 0.82) 55%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(244px 375px, 1px 1px, rgba(218, 240, 249, 0.9) 55%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(440px 400px, 1px 1px, rgba(211, 241, 251, 0.9) 60%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(597px 301px, 1px 1px, rgba(223, 246, 248, 0.91) 44%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(33px 552px, 1px 1px, rgba(214, 238, 251, 0.97) 60%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(194px 574px, 1px 1px, rgba(220, 243, 246, 1) 42%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(432px 577px, 1px 1px, rgba(211, 244, 253, 0.99) 47%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(587px 511px, 1px 1px, rgba(215, 245, 249, 0.87) 49%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 10px 127px, rgba(221, 248, 254, 0.74) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 172px 7px, rgba(220, 248, 255, 0.83) 49%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 319px 58px, rgba(217, 243, 252, 0.88) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 595px 91px, rgba(220, 238, 248, 0.76) 47%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 102px 267px, rgba(217, 239, 248, 0.85) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 281px 178px, rgba(222, 240, 253, 0.95) 45%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 421px 210px, rgba(221, 248, 250, 0.77) 54%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 564px 283px, rgba(219, 243, 246, 0.77) 57%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 77px 440px, rgba(218, 248, 251, 0.82) 55%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 244px 375px, rgba(218, 240, 249, 0.9) 55%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 440px 400px, rgba(211, 241, 251, 0.9) 60%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 597px 301px, rgba(223, 246, 248, 0.91) 44%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 33px 552px, rgba(214, 238, 251, 0.97) 60%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 194px 574px, rgba(220, 243, 246, 1) 42%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 432px 577px, rgba(211, 244, 253, 0.99) 47%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 587px 511px, rgba(215, 245, 249, 0.87) 49%, rgba(0, 0, 0, 0));
}

#bg3, #bg3::after {
  background-size: 900px 900px;
}

#bg3 {
  z-index: 5;
  background-image: -webkit-radial-gradient(112px 126px, 1px 1px, rgba(217, 237, 253, 0.65) 63%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(302px 33px, 1px 1px, rgba(218, 243, 253, 0.68) 61%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(635px 49px, 1px 1px, rgba(222, 242, 252, 0.77) 62%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(40px 504px, 1px 1px, rgba(225, 249, 251, 0.91) 66%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(509px 442px, 1px 1px, rgba(214, 238, 252, 0.63) 74%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(618px 577px, 1px 1px, rgba(213, 243, 246, 0.96) 64%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(207px 888px, 1px 1px, rgba(223, 246, 248, 0.75) 79%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(532px 734px, 1px 1px, rgba(213, 246, 248, 0.72) 71%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(617px 627px, 1px 1px, rgba(213, 246, 254, 0.75) 69%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 112px 126px, rgba(217, 237, 253, 0.65) 63%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 302px 33px, rgba(218, 243, 253, 0.68) 61%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 635px 49px, rgba(222, 242, 252, 0.77) 62%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 40px 504px, rgba(225, 249, 251, 0.91) 66%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 509px 442px, rgba(214, 238, 252, 0.63) 74%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 618px 577px, rgba(213, 243, 246, 0.96) 64%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 207px 888px, rgba(223, 246, 248, 0.75) 79%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 532px 734px, rgba(213, 246, 248, 0.72) 71%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 617px 627px, rgba(213, 246, 254, 0.75) 69%, rgba(0, 0, 0, 0));
}

#bg3::after {
  content: "";
  background-image: -webkit-radial-gradient(112px 126px, 1px 1px, rgba(217, 237, 253, 0.65) 63%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(302px 33px, 1px 1px, rgba(218, 243, 253, 0.68) 61%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(635px 49px, 1px 1px, rgba(222, 242, 252, 0.77) 62%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(40px 504px, 1px 1px, rgba(225, 249, 251, 0.91) 66%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(509px 442px, 1px 1px, rgba(214, 238, 252, 0.63) 74%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(618px 577px, 1px 1px, rgba(213, 243, 246, 0.96) 64%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(207px 888px, 1px 1px, rgba(223, 246, 248, 0.75) 79%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(532px 734px, 1px 1px, rgba(213, 246, 248, 0.72) 71%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(617px 627px, 1px 1px, rgba(213, 246, 254, 0.75) 69%, rgba(0, 0, 0, 0));
  background-image: radial-gradient(1px 1px at 112px 126px, rgba(217, 237, 253, 0.65) 63%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 302px 33px, rgba(218, 243, 253, 0.68) 61%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 635px 49px, rgba(222, 242, 252, 0.77) 62%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 40px 504px, rgba(225, 249, 251, 0.91) 66%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 509px 442px, rgba(214, 238, 252, 0.63) 74%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 618px 577px, rgba(213, 243, 246, 0.96) 64%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 207px 888px, rgba(223, 246, 248, 0.75) 79%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 532px 734px, rgba(213, 246, 248, 0.72) 71%, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 617px 627px, rgba(213, 246, 254, 0.75) 69%, rgba(0, 0, 0, 0));
}

That is a really long radial gradient string. Regardless of JS or CSS that is a lot for the browser to calculate and paint on every frame.

 

It would be really interesting to see how it performs for both CSS and JS if you remove your parallax plugin. When i turn on paint rectangles and flashing in the browser dev tools, i see paints on the whole screen even after i my mouse leaves the screen 10 seconds later. In Chrome and Firefox dev tools in the timeline i am seeing massive recalculations and repaints and all of them are due to the jquery.parallax.min.js. Every hover requires the whole screen to be recalculated and repainted and then recomposited every frame

 

Jack will have some greater incite regarding this.  :)

  • Like 2
Link to comment
Share on other sites

Thanks for having a look Jonathan :) and thanks for the compliment!

 

The long CSS string is for all the moving stars on the homepage. The alternative is to have small transparent PNGs, I don't know if that would be more cost-effective?

 

I'll try out your suggestions of adding a small rotation and z translate ^_^

 

edit: I've added a small secret code to disable the parallax effect – type '!!!' anywhere and it should stop (on both the normal and 'testing' pages). There's a console output to confirm that your input worked, too.

 

edit again: the GSAP version that's currently live has the small rotation and z transforms. I don't see any notable improvement... (I think GSAP was already using translade3D anyway).

Edited by Acccent
Link to comment
Share on other sites

I poked around a little bit, but I couldn't find that "js-code-dev.js" file Jonathan mentioned - I did see a minified js-code.min.js file which of course was undecipherable. I really have no way to reasonably troubleshoot this, but I can say that it definitely looks to me like something is odd. I really wish I could see a reduced test case with the CSS version next to the GSAP version, look at your unminified code, and see what's going on. Like I said, I'm pretty confident that there's something amiss in your implementation but I could be wrong. 

 

One of the things that makes me highly suspicious is the fact that you said things were just breaking (like the back button) and all the stuttery-ness. GSAP is pretty well-known for being insanely fast and if you're seeing a big difference between the CSS version and the GSAP version, I'm inclined to think something is amiss. 

 

I totally understand that you're out of time and may not be able to provide a reduced test case. No worries. But we're here if you change your mind and want to give us a chance to shed light on what could be causing the problems in your site. It may have nothing to do with GSAP :) 

  • Like 2
Link to comment
Share on other sites

Alright I think I fixed the staggering somewhat.

 

I previously had:

slide
	.addLabel("left", 0)
	.from($leftsec, 1.2, { xPercent: 100, x: 0 }, 0)
	.from([$scenes, $rightsec], 1.2, { xPercent: 55, x: 0 }, 0)
	.from([$scenes, $leftsec, $rightsec], 0.6, { rotation: 0, z: 0 }, 0)
	.from([$scenes, $leftsec, $rightsec], 0.6, { rotation: 0.01, z: 0.01 }, 0.6)
	.from($deployarrows, 1.2, { rotation: -60 }, 0)
	.addLabel("center", 1.2)
	.to($rightsec, 1.2, { xPercent: -100, x: 0 }, 1.2)
	.to([$scenes, $leftsec], 1.2, { xPercent: -55, x: 0 }, 1.2)
	.to([$scenes, $leftsec, $rightsec], 0.6, { rotation: 0.01, z: 0.01 }, 1.2)
	.to([$scenes, $leftsec, $rightsec], 0.6, { rotation: 0, z: 0 }, 1.8)
	.to($deployarrows, 1.2, { rotation: 60 }, 1.2)
	.addLabel("right", 2.4);

and to animate it I used one of the following lines, depending on the situation:

slide.tweenTo("left", { ease: Power1.easeOut });

// OR

slide.tweenTo("center", { ease: Power1.easeOut });

// OR

slide.tweenTo("right", { ease: Power1.easeOut });

I changed all of that to this:

slide
	.addLabel("left", 0)
	.from($leftsec, 0.8, { xPercent: 100, x: 0, ease: Power1.easeInOut }, 0)
	.from([$scenes, $rightsec], 0.8, { xPercent: 55, x: 0, ease: Power1.easeInOut }, 0)
	.from([$scenes, $leftsec, $rightsec], 0.4, { rotation: 0, z: 0, ease: Power1.easeInOut }, 0)
	.from([$scenes, $leftsec, $rightsec], 0.4, { rotation: 0.01, z: 0.01, ease: Power1.easeInOut }, 0.4)
	.from($deployarrows, 0.8, { rotation: -60, ease: Power1.easeInOut }, 0)
	.addLabel("center", 0.8)
	.addPause("center")
	.to($rightsec, 0.8, { xPercent: -100, x: 0, ease: Power1.easeInOut }, 0.8)
	.to([$scenes, $leftsec], 0.8, { xPercent: -55, x: 0, ease: Power1.easeInOut }, 0.8)
	.to([$scenes, $leftsec, $rightsec], 0.4, { rotation: 0.01, z: 0.01, ease: Power1.easeInOut }, 0.4)
	.to([$scenes, $leftsec, $rightsec], 0.4, { rotation: 0, z: 0, ease: Power1.easeInOut }, 1.2)
	.to($deployarrows, 0.8, { rotation: 60, ease: Power1.easeInOut }, 0.8)
	.addLabel("right", 1.6);

(basically adding a pause in the middle, the easings, and adjusting the durations) then used this to actually trigger the animation:

slide.reverse("center");
// OR
slide.play("center");

//OR
if(slide.reversed()){ slide.play(); }
else { slide.reverse(); }

It seems to have smoothed out the sliding animation, and made it more consistent. There still is some staggering/stuttering, but maybe that's because of how heavy the page is to re-render.

 

If you want to have a look at the 'normal' code, it's here: http://robin-v.net/wp/wp-content/themes/paral/js/js-code.js

And for the 'non-GSAP-version' (for the sliding), which is used on http://robin-v.net/testing, here you go: http://robin-v.net/wp/wp-content/themes/paral/js/js-code.dev.js

 

The relevant parts are in the variable declarations at the top (the TimelineMax named slide) and under the 'Deploy sections' header. I don't think anything else matters in this case, but feel free to have a look ^_^

 

Thanks again for taking the time to comment on this... I probably won't be very available in the coming week to help with debugging/testing, but I'll try to check this thread to answer to questions if you have some. If I can contribute to making Greensock more powerful, I'd love to. (Of course, if you don't want to spend more time on this, I absolutely understand, I already am super grateful for the help!)

 

edit: I also disabled the slide-triggering buttons until their initial fade-in was over, so that probably helped too I think. No risk of positions being registered at the wrong moment etc.

Link to comment
Share on other sites

Lol. I see you are using the Konami code, although it doesn't seem to do anything but log a message.
 
Concerning your question about using transparent PNGs. Yes, they are much faster. Sometimes I even use a sprite sheet with all the different alpha levels to speed things up during an animation. Here's an example of a sprite sheet of some stars I used in a game.

 

DaaYTRT.png

  • Like 3
Link to comment
Share on other sites

I've changed the stars layers to use transparent pngs, though the version that's currently online isn't very pretty. We'll see how that affects performance.

 

As for the konami code, you'll see the effect on the side panels, it takes a little while to activate :P

  • Like 1
Link to comment
Share on other sites

If you want to reduce your png to the smallest possible file size, while keeping quality, you can run your png through this online png / jpeg optimizer.

 

http://tinypng.com/

 

Take note that even though it accepts jpeg and png.. you will see better smaller file sizes and optimization with png

 

:)

  • Like 4
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.
×