Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 05/11/2018 in all areas

  1. Regarding the if statements: if all the animations they are executing are the same then you should be able to replace the ifs with just a single selector for the active slide shown at the bottom. That's kind of the point of adding a class like active so it's selectable. tl.set($currentSlide,{autoAlpha: 0,className:'-=active'}) tl.set($nextSlide,{autoAlpha: 1,className:'+=active'}); tl.play(); if($nextSlide.index()==0&&$nextSlide.hasClass('about')){ var aboutH1 = $('.about h1'); slideAnim.to(aboutH1,0.5,{x:300},'-=0.5'); slideAnim.play(); }else if($nextSlide.index()==1&&$nextSlide.hasClass('team')){ var teamH1 = $('.team h1'); slideAnim.to(teamH1,0.5,{x:300},'-=0.5'); slideAnim.play(); }else if($nextSlide.index()==2&&$nextSlide.hasClass('case')){ var caseH1 = $('.case h1'); slideAnim.to(caseH1,0.5,{x:300},'-=0.5'); slideAnim.play(); } // if all the above animations are the same then you should be able to replace the ifs with just a single selector for the active slide slideAnim.to(".active h1",0.5,{x:300},'-=0.5'); slideAnim.play();
    2 points
  2. I did this with Animate CC and tweenLite. If you are interested let me know I will send you the Code https://leaptothetop.net/DevZone/eModule/formation/ubd/map-PointnClick_Zoom.html
    2 points
  3. It's probably not a good idea to keep asking for the size of something 60/second. jQuery .width() and .height() uses stuff from this list. https://gist.github.com/paulirish/5d52fb081b3570c81e3a Maybe something like this.
    2 points
  4. If you see the same code a few times, there's almost always a way to turn it into a function or loop. I'd agree with Jack in that this may be a bit over-engineered and I wonder if this thread may help. It's not exactly the same as your project, but you want the active animation to reverse before the new one plays and that's similar to what's happening in that thread. @Carl has a really nice simplified example of code and @Sahil followed up with some nice additions to the project. I think studying those examples could help. Happy tweening.
    1 point
  5. Would you mind stating your question more succinctly? The demo has 120+ lines of code and I don't quite understand what you were hoping we'd help you with exactly. A quick glance at the code does seem like it's over-engineered maybe. There's probably a much easier way to do what you're attempting, but I'm not entirely clear on what your goal is. Do you have a GSAP-specific question we can help you with?
    1 point
  6. Really interesting that modifiers is another way to avoid "caching" values!
    1 point
  7. So, turns out I'd forgotten to swap out import 'gsap'; in one of the files, which explains why the size didn't change and everything worked immediately. Once I fixed that, I did have to make an explicit reference to CSSPlugin for everything to work (importing from /all or /TweenLite made no difference, except I had to manually import some eases from EasePack when I wasn't using /all). I gained 18 KiB (going from 800 to 782KiB minified, including all other assets), which I think isn't really worth the added maintenance and potential for invisible mistakes. (If you don't import CSSPlugin, there's no warning at all, but the tween just don't do anything – I'm not sure that there isn't something else silently failing somewhere else.) It makes sense that the gain is so small, I'm using TimelineMax so the only thing that isn't used is the added stuff from TweenMax. It's probably possible to fragment GSAP into more granular chunks, but that's a challenge for another day, haha. edit: maybe, when transitioning to 2.0, you should consider renaming TweenLite and TweenMax to just Tween, and TimelineLite/Max to just Timeline. The functionality would be defined by what you import anyway – I don't think there's a reason to have both names, is there? It can be a bit confusing when starting out with GSAP to decide whether to use Lite or Max versions, when, really, as long as you need the Max features once, you might as well just use it everywhere.
    1 point
  8. Yeah, it'd be best if you could create a reduced test case in codepen please. I'm finding it difficult to follow exactly what you're asking for here. The simpler the example, the better.
    1 point
  9. Good news: every major ad network has whitelisted GSAP and doesn't count it against your file size (as long as you use their CDN-hosted version of GSAP). See https://greensock.com/kilobyte-conundrum/ So it'd definitely be wise to use GSAP. As for maximum file size limits, I'm not sure what to tell you. I'm not aware of the various networks' restrictions. I'd encourage you to get in contact with them. Good luck with the project, @miks
    1 point
  10. Hm, I didn't quite understand your question. Can you explain further? Are you asking if GWD imposes some kind of maximum file size?
    1 point
  11. One more pen for the concept. I animated the size of the parent container so you can see how it works responsively without having to resize the window.
    1 point
  12. Here's a second run at this with @OSUblake's invaluable assistance moving the resize calculations into an event handler outside of the modifiers. I realized, dufus that I am, that the original had a whole bunch of extra calculations of the object's size that were unnecessary all you had to do was calculate the parent's size. So here's my revised effort for Responsive Transforms Based on Parent ( in this case the Window). Note I added in the divide by 100 in the function to allow for the tween x and y to treat 100 as 100% percent of the parent/window size. Otherwise 1 would represent 100%. It can certainly be removed to reduce the calculations if you want to work with values of 0-1 instead of 0-100.
    1 point
×
×
  • Create New...