Jonathan last won the day on November 6

Jonathan had the most liked content!

Jonathan

Moderators
  • Content count

    3,219
  • Joined

  • Last visited

  • Days Won

    120

Jonathan last won the day on November 6

Jonathan had the most liked content!

Community Reputation

4,120 Superhero

2 Followers

About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, and Herbalism

Recent Profile Visitors

19,321 profile views
  1. GSAP collapsing/expanding hidden content

    So @DD77 try this.. there is a better way but i am pressed for time. This is just quick and dirty since I'm about to step out the door. Maybe someone else can provide some assistance? But my brain is running on fumes right now. Happy Tweening!
  2. GSAP collapsing/expanding hidden content

    OK @DD77 here it is working.. Now keep in mind that i had to change some CSS (SCSS) since most of the issue was due to your CSS and JS.. so here we go. As a rule of thumb when animating height that is not defined, you will need to set the overflow:hidden property since it is required so the browser can hide the overflow to animate the height properly. And the overflow:hidden property also tells the browser that your element has a defined shape for use with the height property, this is important for your element to animate height. I ran each element in a loop and stored each timeline in the elements DOM node. Then in the event handler i get the timeline from the elements DOM node and either play() or reverse() the elements timeline. And keep in mind that in the TimelineMax() constructor that forward is NOT a valid property, i think you meant reversed: true. I had to make it so the CSS had the following: .Tile-flyout { /*display: none;*/ /* do not use it, causes issues for show hide and calculating height */ position: relative; /* i added the below */ visibility:hidden; /* hides all .Tile-flyout on load so GSAP autoAlpha can do its thing */ height:auto; /* tell the browser that initial height is auto */ overflow:hidden; /* required when animating height properly */ } .Tile.is-expanded .Tile-flyout { /*display: block;*/ /* do not use it, causes issues for show hide */ } And i also had to adjust the .Tile-flyout:before rule /* was */ top: ($space / -2); /* changed to -2 to 2 so top right arrow can line up properly on flyout */ top: ($space / 2); Make sure that you always just take the time to setup your elements positioning first without any animation. And that the CSS is setup for hiding elements for all aspects of your CSS and JS. So when you are ready to animate it will make it so much easier. Happy Tweening! Resources: TimelineMax Docs: https://greensock.com/docs/TimelineMax GSAP CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha CSS overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
  3. Scale video is very buggy

    Hi @anotheruser Whats happening looks more like a CSS layout issue, than GSAP related. The reason being is that you have multiple .videoTag elements set to position: absolute, which is fine. But that means that either your .imgClass or #cameraItems element MUST have position: relative on them. So your .videoTag elements can be absolutely positioned relative to their parent #cameraItems. This ensures cross browser layout. Plus you will need to add z-index to your .videoTag elements, so you tell the browser which elements are stacked which way so the videos don't cover your animated elements right away or at all. I think that is why i'm confused cuz the way you have it now, the video immediately covers your elements being animated. Is the video supposed to fade in, or scale up. I think that is why i'm still confused on the effect your going after.
  4. Scale video is very buggy

    @anotheruser I think your next step using my forked codepen is to get your video to be masked or clipped. Since i presume that you want the elements to slide open and then you see the video like a revealing curtain, right?
  5. GSAP collapsing/expanding hidden content

    @DD77 Yeah what i'm saying is that you should set it up differently with a timeline, to make it easier to maintain and animate. It will make your life easier to learn those concepts since your using the jQuery one() method inisde another event handler and binding that event over and over again on each click. Which is also creating unnecessary tweens on each click and then creates additional tweens when one() runs again. So the GSAP concept i shared above makes sure your only creating the tweens and / or timelines once to prevent bad performance and a smooth animation cross browser. Sometimes its frustrating to have to recode something but in that process you learn things that help you the next time you have to play an animation and have it reverse saving you time and insanity I'm sure there are others who might want to take a swing and go through all your logic and code to fix it. But i just dont have teh time right now to go through everything else that is happening in your codepen. Maybe if you reduced it to just the GSAP part with a couple of elements, only the logic for the show and hide event handler, and the GSAP tweens. Then others or myself can take the time with just the animation your trying to achieve and not have to go through unnecessary parts that are not GSAP related.
  6. Scale video is very buggy

    Hi @anotheruser I'm a little confused on what your animation should do or animate like. You should first comment out your <video> elements and first animate it's parent #cameraItems first. So you make sure your animating it the way you want so we are all on the same page. Then once you have #cameraItems animating correctly, then you can worry about animating the video element. You know what im saying. Animate in parts so you can rule out anything that is causing a conflict. Because even when i take out your video element i see no animation playing. You can see how i modified your codepen so there is no video element. And removed the add() method since that is only needed for when adding tweens or timelines to a master timeline. See this forked codepen without the video .. is this what the animation is supposed to do So like i said above its better to first get the main animation working before introducing video and any other assets to make sure your first animating the way you want. You know what i mean?
  7. GSAP collapsing/expanding hidden content

    Did you even look at what i wrote and the codepen examples showing how the concept of play() and reverse() work?
  8. GSAP collapsing/expanding hidden content

    Hello @DD77 and Welcome to the GreenSock forum! It looks like you are doing a lot of adding / removing CSS classes that set display block and none. That will cause conflicts with CSS and JS fighting to the death for control of animating elements. It would take a while just to remove some of your logic to make it work. So the concept to play an animation and then reverse it, is just that. We wont need to create more tweens just to play back (reverse) the tweens. In GSAP this is down by just calling reverse() method. So in your case you might want to look into using a timeline for better control of your animation. The below example just shows a simple scaleY animation that triggers on hover. Even though you are using a click event, the concept is the same! On hover in we play() the timeline. And when we hover out we reverse() the timeline. Take a look at the below example just so you can see the concept of play() and reverse() in action. Also when using GSAP to associate a timeline with multiple elements you must store each timeline in each elements DOM node. This way you just call that timeline for that element once you click the trigger for that element. Again the below example uses hover event as a trigger instead of click. But the concept is the same no matter what the event handler. So you will see that i store each elements timeline within a loop. And then when i trigger that elements event handler i get the timeline stored in the elements DOM node to either play or reverse() the animation. This way you are not creating extra tweens and timeline to just reverse what you first played. Does that make sense? I think if you cleanup your code with all those classes for display hide show, and use the GSAP concepts for play() and reverse(), it will make animating a toggle show / hide slide down much easier. Happy Tweening!
  9. Scale video is very buggy

    Hello @anotheruser and Welcome to the GreenSock Forum! I would second @OSUblake. This looks like either the video is not loading due to your video. Or most likely your not waiting until the video has loaded fully before animating it. But this is not happening due to GSAP, but because your telling GSAP to animate an active element while its downloading video data. Which means its gonna be jank and buggy scale city. So you might want to make sure you using the HTML5 preload attribute for the video element, and or look into doing other things to make sure your video is fully loaded before you animate it. And also make sure your only animating stuff when the DOM is ready (DOMContentLoaded) and the window is fully loaded (addEventListener("load")), also meaning that the video is fully loaded. Otherwise you will see that delay and hesitation before it tries to animate an active media asset.
  10. Chrome Bug - Display: None Breaking GSAP Animation

    Hello @elegantseagulls and Welcome to the GreenSock Forum! The Mighty @Carl is right! The display none issue is not related to GSAP but is how display none works with SVG. In SVG any elements that use display:none or elements that are inside a <symbol> or <defs> element will not be directly rendered by the browser per teh spec. Since those elements will be removed from the render tree (DOM). See SVG display spec: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display So like @Carl advised its better to use either the visibility: hidden CSS property or to use the visibility attribute for that element. Happy Tweening
  11. Scroll-Behavior CSS + Firefox + ScrollTo issue

    Are you seeing this in new Firefox 57? Usually the CSS property scroll-behavior is buggy when applied to the body element. You might want to try and add it to the html element instead, this way it affects the viewport and not the body which has issues when scroll functions are performed by the browser on it... and see if that helps? So you can either try setting body { smooth-scrolling: auto; } or remove it from the body and use on the root element html { smooth-scrolling: smooth; } If that does not work try using html { smooth-scrolling: auto; } See if that works.. if not then Jack's @GreenSock will have to investigate if new Firefox 57 is causing any shenanigans.
  12. Colour tween not completing

    Hello @boonier and Welcome to the GreenSock Forum! I noticed that your codepen is not rendering in your first post. You might want to edit your first post and include a proper link to the codepen so others in the forum can test it, and offer their solutions as well.
  13. Gsap height animation

    Hello @DD77 and welcome to the GreenSock Forum! Unless i'm missing something, i am a little confused on what your GSAP related question is? When i look at your JS code i do not see any GSAP tweens or timelines. It looks like you are just adding removing classes to animate your elements. Can you please provide some more info on how we can help you with GSAP since i do not see any GSAP code, thanks!
  14. Hello @opila, The CSS filter property, especially the filter drop-shadow can be a big resource hog. You could try and use the CSS box-shadow property, which is used for the very purpose of giving elements like <img>'s a drop shadow. box-shadow can also be a resource hogs but not as bad as CSS filter drop shadow which are still somewhat buggy in all browsers. But box-shadow is your best bet for a drop shadow effect on a box. The flickering can also be resolved by using various CSS transform supporting properties like transform -axis: preserve-3d, backface-visibility: hidden, and the use of the perspective property or the CSS transform: perspective function (transformPerspective). But glad you got it sorted.
  15. Firefox's new browser Quantum (v57) was released today!

    Yeah that FPS thing we are seeing could be a Firefox 57 bug. Ive been testing this new version and it is bug city when using their dev tools and other things that used to work fine, now work very wonky, or not at all.