Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Jonathan

  1. Jonathan

    Width Calc

    Its always good to support any browser that hasn't reached its life cycle, so you can have your product work on any browser not put to death. Also IE11 was the highest Internet Explorer version you could get on Windows 7. Windows 7 is reaching its life cycle in another year. Internet Explorer (IE) 10 will reach its end of support on January 31, 2020. So that means IE11 will also reach the end of its life cycle some time after that. Here is Microsoft's list of their End of Cycle charts for Internet Explorer https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer
  2. Jonathan

    Width Calc

    Hello @Jaexplorer and welcome to the GreenSock forum! The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above. So technically calc() is not a property that is animatable, since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>. Please see the CSS calc() spec: https://drafts.csswg.org/css-values-3/#calc-computed-value https://drafts.csswg.org/css-values-3/#calc-notation https://drafts.csswg.org/css-values-3/#calc-syntax https://drafts.csswg.org/css-values-3/#calc-type-checking Happy Tweening
  3. Your probably looking for the onDrag function: https://greensock.com/docs/Utilities/Draggable onDrag: Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening
  4. That explains it.. That is why i asked above you if you were setting your initial CSS transforms outside of GSAP. In your case using the jQuery css() method. GSAP has no way of knowing when you set a transform outside of it, especially when using the jQuery css() method. That is why it is always better to set your transforms with GSAP like i advised above, so GSAP is kept in the loop of what your changing. So you don't change CSS your trying to animate oustside of GSAP. Happy Tweening
  5. You should try setting the initial transform and perspective with GSAP. It will handle all the browser vendor prefixes if needed for each browser. And then will allow GSAP to record and keep track of your CSS transform changes. TweenMax.set(".drag_zone", {scale:1, x: "-50%", perspective: "600px"}); // then your other GSAP code goes here Also keep in mind that GSAP also has xPercent and yPercent instead of using x or y, for when you need to do a percentage based transform for translateX and translateY. xPercent and yPercent, percentage based transforms: https://greensock.com/gsap-1-13-1 https://codepen.io/GreenSock/pen/rAetx If your still having an issue please create a codepen demo example like I described above. Happy Tweening
  6. Hello @ninmorfeo and Welcome to the GreenSock Forum! How are you setting your initial transform translate3d() ? Are you setting it with GSAP using a set() or are you doing it some other way in the CSS outside of GSAP? The reason being is you could be setting it outside of GSAP. But this will be hard to debug without seeing your code in context. But to better help you please create a limited codepen demo example so we can see your code live and in an editable environment. Happy Tweening
  7. Hello @Duke3D and Welcome to the GreenSock Forum! This is more of general JS question related to event binding and listening of an element, than a GSAP API specific question. Now this could be done by just adding an addEventListener() on the load event for the element your checking if its loaded. But for my own uses, I have a little jQuery monitor element is loaded script i use to check if various elements are loaded. /* monitor if element is loaded (minified jquery plugin) */ (function($){jQuery.fn.monitor=function cb(callback){var set=this.first();var h=set.height();var w=set.width();var txt=set.text();var html=set.html();(function flux(){setTimeout(function(){var done=h==set.height()&&w==set.width()&&txt==set.text()&&html==set.html();if(done){if(jQuery.isFunction(callback))callback()}else{h=set.height();w=set.width();txt=set.text();html=set.html();flux()}},500)})()};})(jQuery); Its usage is like this /* run monitor check on element #BillVector */ $("#BillVector").monitor(function(){ // code to run when element is loaded console.log("#BillVector is loaded"); }); And here is your codepen with that Monitor Element Loaded jQuery script in it. You will see console log fire when #BillVector element is loaded. Check console for output: https://codepen.io/jonathan/pen/ydeJmp?editors=1111 Happy Tweening
  8. Jonathan

    Overlay color

    That solution I advised on was just CSS and doesn't require animating since its already part of the overlay your already animating. Normally that type of thing would have to be done with an extra element and also having to animate that element in sync with your original overlay. Or adjusting the background offset like @Visual-Q advised above. But your issue was more of having to do with the setup of your layout. And Pseudo-Elements allow that flexibility of not having to create extra elements into the DOM since you wanted the overlay to have 2 background-colors. GSAP just simply animates that layout and or elements you already have marked up. Since GSAP can animate any element or object and allows you setup your html, svg, canvas, webgl, js object ... etc.. the way you want But glad you found it useful
  9. Jonathan

    Overlay color

    Hello @Emilek1337 and Welcome to the GreenSock Forum! I have a different take on your question by just adding one CSS rule to your code. But lets answer one of your questions... You asked the following: Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color. For example you can add the following CSS rule to your codepen .img-overlay::after. .img-overlay::after { content: ""; height: 50%; width: 100%; background-color: DeepSkyBlue; z-index: 99; position: absolute; left: 0; bottom: 0; top: auto; } Like this: https://codepen.io/jonathan/pen/bPdyQG Happy Tweening Resources: Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before ::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after
  10. Hello @JackIsJack44 and welcome to the GreenSock Forum! That doesn't work in Chrome due to the nesting of SVG element within another SVG element. You have to target your main parent <svg> #main and not its child nested <svg> #test. var t1 = new TimelineMax(); t1.to('#main', 2, {x:200,y:200}); https://codepen.io/jonathan/pen/agOrBJ Happy Tweening
  11. You forgot about number 3 that @OSUblake advised which is: 3) add a new stacking context On what element you ask and how? .. That's a great question! If you create a limited codepen demo example we can see see how it can solve your issue when we see your code live and in an editable environment to better help you. Thanks and Happy Tweening
  12. Hello @Adam Wright and Welcome to the GreenSock Forum! Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from() So the from() method has 3 parameters.. specifically the target parameter: TweenMax.from( target, duration, vars ) The target parameter target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object. Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution. The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases The Vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); }); The jQuery way: // wait until DOM is ready $(document).ready(function() { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded $(window).bind("load", function() { // GSAP custom code goes here }); }); Happy Tweening
  13. Hello @Jean-Tilapin and welcome to the GreenSock Forum! You will get faster replies if you please create a limited codepen demo example. Since it will be hard to help you without seeing your code live and in context. Here is a video tut on how to create a codepen demo example. Thanks
  14. Yes @OSUblake is right the default z-index is auto. So in order to use z-index you must use either position (absolute, fixed, or relative), otherwise z-index will not be applied. z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Happy Tweening!
  15. Hi @dee If the error is coming from custom.min.js on Line 118, you should go to that line number in that file. Then you can narrow down what triggered that error
  16. Hello @superasn and Welcome to the GreenSock Forum! SplitText only splits up your text into lines, words, or letters. Then you animate those split text elements the way you want. In GSAP those type of preset effects are done with easing, specifically with GSAP CustomEase. CustomEase: https://greensock.com/docs/Easing/CustomEase You can see here in the below codepen examples of those easing presets, for example in CustomWiggle. https://codepen.io/GreenSock/pen/LRqkOr?editors=0010 Check out the Easing Docs on it CustomBounce:https://greensock.com/docs/Easing/CustomBounce CustomWiggle: https://greensock.com/docs/Easing/CustomWiggle Also check out this video tut on how to use it Happy Tweening!
  17. Hello @danboyle8637 and welcome to the GreenSock Forum! Looks like your not waiting until your elements are ready in React. codesandbox probably has issues when reloading iframes which is what makes up those view panels in codesandbox . You might want to make sure you run your GSAP code once the DOM is fully ready. In vanilla javascript it is the DOMContentLoaded event, in jQuery its the ready() event. In React it is the componentDidMount and componentDidUpdate event listeners. This way you know the DOM has all your elements loaded and ready before trying to have GSAP access them. Happy tweening!
  18. Hello @Elitzca and Welcome to the GreenSock Forum! Is there any reason why your not referencing this for the current node your hovering over? Then you wont have to specify that simple class selector targeting all elements with those classes. That will allow you to target this, which will be the element your currently hovering over. this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this You can see in the following codepen examples of running a loop to bind hover events to multiple elements. Then associating a timeline with each element and storing that timeline in the nodes properties to be accessed when hovering over each element. Even though the below examples use jQuery for the loop, the technique is the same for vanilla JavaScript. https://codepen.io/jonathan/pen/KdYqWo and this one too https://codepen.io/jonathan/pen/rOgVEd I also noticed your HTML markup is malformed. You have an <li> tag with no parent of <ul> or <ol> in your above HTML markup. So you have this: <li class="div-link"><a href="#">Order parts</a></li> It should be this with the <ul> or <ol>: <ul> <li class="div-link"><a href="#">Order parts</a></li> </ul> If you provide a limited codepen we will be more than happy to help you figure out what your trying to do. Here is a link to how to create a limited codepen demo example so we can test your code live. Happy Tweening!
  19. HI again @Gezmins, I don't really use Google Web Designer but I have seen this sort of thing before. So what it looks like is happening is that .gwd-page-content has a transform with matrix3d() and perspective() which gives it a higher stacking context than your gwd-taparea. Some have solved this Firefox bug, by adding transform-style: flat on the .gwd-page-content element. But then I'm not sure if that will fully adjust the stacking context since transform-style flat will fallback to transform 2D and not transform 3D. Also keep in mind that when you use position absolute you should always specify your z-index so you tell the browser how to stack those absolutely positioned elements. I think that is another reason why the stacking context is not stacking right since z-index default is auto which can be a wild west scenario with inconsistent render results. I believe the lack of z-index and other things is causing Firefox to get confused on the stacking context. I would make sure that your gwd-taparea element has a higher z-index than the #background and #footer-ctn. If your element does not need absolute position then just use position relative which will allow you use z-index and so your element stays in the flow of the document. What happens if you add the following CSS to your gwd-taparea so it gives it a new stacking context? gwd-taparea.gwd-taparea-1uz5 { -webkit-transform: translateZ(0px); transform: translateZ(0px); } Happy Tweening
  20. Just as @GreenSock (Jack) had said above you should try to clean up your high amount of precision numbers of your SVG children. Check out this below link, its an online SVG clean up tool (don't forget to toggle off Clean ID's if it gets set to on) https://jakearchibald.github.io/svgomg/
  21. Hello @Gezmins and Welcome to the GreenSock forum! Usually that happens due to a stacking context issue. Are you sure that it is not related to this Firefox bug report? https://bugzilla.mozilla.org/show_bug.cgi?id=729625 Sometimes you can add transform: translateZ(0px) to your hit area to resolve this so it gains a new stacking context so its clickable. And / or even adding transform-style: flat to the .gwd-page-content selector. But do you have any of your html and css code to post for context? Happy Tweening!
  22. Hello @marko krstic and Welcome to the GreenSock Forum! You can also add your selector string right in your tween target, since GSAP uses querySelectorAll() for the target parameter. This way jQuery isnt required, like this: .from("#bottomLogo", 1, {opacity: 0, y: '200%'}, "-=1") from() Docs: https://greensock.com/docs/TimelineMax/from() .from( target, duration, vars, position) target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening!
  23. Hi @Anand Makhija and Welcome to the GreenSock forum! Based on the link you provided i cant see a slider in latest Firefox. I see it load in Chrome, but very very slowly. GSAP can accomplish that slider in that link you provided above. That looks like a fullscreen slider, with some hover and parallax effects. The tracking effect of the mousemove mouse cursor is a little off putting since there is a weird delay that almost feels like its not tracking correctly. Do you have any specific questions about how to use the GSAP API? .. if you do we are more than happy to help you! Happy Tweening!
  24. Hi @Killerwork and Welcome to the GreenSock forum! To add to all the above great advice. I would second on SVG being a CPU hog, since SVG cannot take advantage of the GPU (your graphics card) to animate. That is why you will see that CPU spike even more on mobile. You can also look into the HTML5 Intersection Observer API to try and detect when your elements are outside or inside the viewport. This way you only animate when your elements are inside the viewport. IntersectionObserver API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API You can also checkout the HTML5 Page Visibility API to detect when a user gives focus to another tab so you pause your animations when the browser tab of your animation is not active. Check out this codepen example of the Page Visibility API with GSAP : https://codepen.io/jonathan/pen/sxgJl Page Visibility API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Happy Tweening
  25. Yeah, visibility: hidden should have worked. Do you have a current codepen of this so we can see your code in action and in a live editable environment? @mikel has visibility: hidden in his codepen assigned to the class .hidden and it is working there.