Jump to content

Jonathan last won the day on January 23

Jonathan had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Jonathan

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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!
  9. 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
  10. 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!
  11. 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!
  12. 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!
  13. 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
  14. 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/
  15. 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!
  16. 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!
  17. 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!
  18. 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
  19. 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.
  20. Hello @waschbaer__ and Welcome to the GreenSock Forum! Keep in mind that anytime you use any type of from() tween, that the immediateRender special property is defaulted to true. So you will need to add immediateRender: false if you see that visible before the animation triggers. immediateRender: Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true. That goes for all from tweens from() fromTo() staggerFrom() staggerFromTo() Since your animating opacity (autoAlpha), you can also add visibility: hidden to your elements css so also dont have your item visible on load. The autoAlpha special property will automatically toggle visibility property to visible before animating opacity to 1. Resources: fromTo(): https://greensock.com/docs/TweenMax/static.fromTo() CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Happy Tweening
  21. Hello Fellow GreenSockers, @GreenSock (Jack) has made a new Learning page. Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. Enjoy! https://greensock.com/docs/HelperFunctions That's it for now, but we'll keep adding relevant helper functions here as we craft them. Happy Tweening!
  22. Chrome did add a built in lazy load for images below the fold of the viewport months ago. I wonder if those new versions is causing a conflict or that buggy re-loading of images. Which would not surprise me based on Chromes track record with not being consistent about features and those features consistent behavior. Based on that lazy load feature in Chrome there have been reports that users with intermittent network connections, images may fail to load when scrolling down the page or trigger a reload. Hopefully they work it out. But you can always submit a bug report to Chrome Developers and see if they can fix your issue. They are pretty good (sometimes) on fixes their bugs. Happy Tweening
  23. Hi @OxXxigen and Welcome to the GreenSock Forum! You can also use the removeCallback() method https://greensock.com/docs/TimelineMax/removeCallBack() Happy Tweening!
  24. Hello @Manikandan Jeyaraman and Welocme to the GreenSock forum! All you have to do is enqueue the GSAP script like @Dipscom advised. Please add the below code to your WordPress themes functions.php. <?php // The proper way to enqueue GSAP script // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> Resource: WordPress Codex for enqueuing JS files: http://codex.wordpress.org/Function_Reference/wp_enqueue_script Happy Tweening