Jump to content

Search the Community

Showing results for tags 'conflict'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 10 results

  1. Hello Valerio here, nice work with gsap its amazing and i'm discovering it. I've been using scrollTrigger to animate a 360 photo in a canvas with position fixed. Then i discovered scrollSmoother, purchased the club, but if i enable it scrollTrigger stop to work.... i tried to solve it but i cannot find a solution, can you help me to understand the problem? i let commented at the end of the js the smoother to see the error. // let smoother = ScrollSmoother.create() thanks in advance, Valerio.
  2. Have you ever been in a situation with GSAP where you needed a higher level of control over conflicting tweens? If you’re just creating linear, self-playing animations like banner ads, chances are the default overwrite mode of false will work just fine for you. However, in cases where you are creating tweens dynamically based on user interaction or random events you may need finer control over how conflicts are resolved. Overwriting refers to how GSAP handles conflicts between multiple tweens on the same properties of the same targets at the same time. The video below explains GSAP’s overwrite modes and provides visual examples of how they work. Want to master GSAP? Enroll in CreativeCodingClub.com and unlock 5 premium GreenSock courses with over 90 lessons. New lessons like this one are added weekly to keep your learning fresh. GSAP’s 3 Overwrite Modes false (default): No overwriting occurs and multiple tweens can try to animate the same properties of the same target at the same time. One way to think of it is that the tweens remain "fighting each other" until one ends. true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately. "auto": Only the conflicting parts of an existing tween will be killed. If tween1 animates the x and rotation properties of a target and then tween2 starts animating only the x property of the same targets and overwrite: "auto" is set on the second tween, then the rotation part of tween1 will remain but the x part of it will be killed. Setting Overwrite Modes // Set overwrite on a tween gsap.to(".line", { x: 200, overwrite: true }); // Set overwrite globally for all tweens gsap.defaults({ overwrite: true }); // Set overwrite for all tweens in a timeline const tl = gsap.timeline({ defaults: { overwrite: true } }); Below is the demo used in the video. Open it in a new tab to experiment with the different overwrite modes See the Pen overwrite demo by SnorklTV(@snorkltv) on CodePen. Hopefully this article helps you better understand how much control GSAP gives you. Overwrite modes are one of those features that you may not need that often, but when you do, they can save you hours of trouble writing your own solution. For more tips like this and loads of deep-dive videos designed to help you quickly master GSAP, check out CreativeCodingClub.com. You’re going to love it.
  3. Hi. We have a digital signage content editor with many widgets, and 2 of the widgets use gsap with jquery plugin, and we added another jquery plugin for a new widget (http://wowslider.com/), and a few of the features in that library didn't work, I was debugging for a long time when I found that it conflicts with the gsap jQuery plugin, more precisely the easings defined on the jQuery object, for example jQuery.easing.easeInOutExpo, because the easings share the same name in both libraries, but they work differently, the variable has different function references in the two libraries. Currently the gsap definition is in place, which causes some wowslider features to not work. I tested removing gsap, and then those features worked. I already contacted their support, but they couldn't give a solution, and I want to avoid modifying the code of these libraries. All I would like to ask for is some tips to avoid this issue. Is there a no-conflict option in gsap plugin? Can I separate two jQuery instances for the two libraries? Thanks in advance! Roland
  4. hey there. this is my first topic here. so first of all thanks for such a great plugin. here I'm using gravity form plugin. but when I check a checkbox I'm receiving this error Uncaught TypeError: Cannot read property 'step' of null I will appreciate any help Regards Mohsen
  5. $(".iSmall, .shrink").on("click", function() { if (circle.reversed()) { circle.play(); } else { circle.reverse(); } }); Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline... It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all. So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink." and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" They are both linked to the same timeline you will find in the js window. On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . . also computers and electricity and reading/writing. LOL seems that way, Thanks in advance anybody who answers.
  6. TommyD

    Multiple TweenMax

    Hi, I'm developing a Wordpress plugin which make use of your great library. As you can imagine other developers do the same and this could generate conflicts using multiple installations of TweenMax. I've followed what you suggested here: http://greensock.com/forums/topic/9881-avoid-multiple-loaded-tweenmax-and-tweenlite/ But I keep having problems. There's another plugin which includes TweenMax in this way: var oldgs = window.GreenSockGlobals; var oldgs_queue = window._gsQueue; var my_gs = window.GreenSockGlobals = {}; // your library here.. try{ window.GreenSockGobals = null; window._gsQueue = null; delete(window.GreenSockGlobals); delete(window._gsQueue); } catch(e) {} try{ window.GreenSockGlobals = oldgs; window._gsQueue = oldgs_queue; } catch(e) {} This code is executed before mine. I've tried to do the same without luck. Here is my code: var another_gs = window.GreenSockGlobals = {}; // your library here window.GreenSockGobals = window._gsQueue = null; I get this error: Uncaught TypeError: Cannot read property 'greensock' of undefined And when I try to use it in this way another_gs.TweenMax.to(.. another_gs is undefined. Could you please help me solving this issue? Many Thanks Thomas
  7. Hi! I don't know whether these are bugs or not, (or i just didn't get the concept of the BezierPlugin properly) As you see on the pen, if in the properties object i add props like (x, top, rotationXYZ) after the bezier: {'x', 'top', autoRotation: true}, those will be ignored. But if i switch them, the BezierPlugin will be ignore the properties which are defined before the bezier: {}. Ok, it's probably the correct behavior but it would be cool to be able to combine these values like x and xPercent:) But as you see on the third example of the pen, the rotation parameter will be ignored even if bezier: {autoRotation: false} as long as the bezier: {...} defined first. So this can be also solved by switching them but i like to be sure that i using these things properly.
  8. Hi once again. i've created my site and am using tweenmax&lite scripts alot and i'm loving it. My problem is; i've installed a plugin called Revolution slider and this slider has tweenmax embedded into it too. And a minor (but crucial) animation in my page is not animating as it suppose to on the page this slider is being placed in. The animation is site wide, footer show&hide which you can see easly from this page. http://goo.gl/VDQqNt (please click Expand to see link on the bottom). As you can see, the footer slides in the window is positioned on the bottom. Now please check the same animation on this screen. As you can see the footer appears but the window wont move to the location. And this small bit is the headache that my clients are hell bent on giving me. I've contacted them and trying to solve this issue but i strongly suspect that this is the cause of the tweenmax scripts being loaded again and again. So my question is, is there a jquery no conflict equlivent for gsjp ? (since i'm assuming its conflicting some how) Also any suggestion on the topic is much apriciated. Lastly, this is the code i'm using var callback3 = function () { $("#main-content").css( { 'min-height': ($(window).height()) - 185 } ); $("a#footer-toggle-link").click(function() { var markerPos = $("div#copyright-line").offset().top; TweenMax.to(window, 2, {scrollTo:markerPos, ease:Quad.ease-Out}); }); }; $(document).ready(callback3); $(window).resize(callback3); Thanks alot.
  9. Hello, I was almost done building a site that relied a lot on TweenMax for animation and Interactivity. The site is buildt on Joomla. This morning after I upgraded from Joomla 3.14 to Joomla 3.2, all my scripts and animation based on Tweenlite and tweenmax stopped working!!! The site can be viewed http://www.intek.jp/index.php This is an older version of the same site when everything was still working fine. http://www.inflowmotion.net/intek/ja/business-domain-jp/sensor-jp/application-jp/parking-jp.html Any idea what could cause the conflict or how to debug this kind of problem? Thank you.
  10. Hi guys, I'm running into an issue that I can't seem to sort out and I'm wondering if anyone has bumped into this before. I have a simple staggerTo firing on page load to fade in a grid of thumbnails. Here's the code: TweenMax.staggerTo('.thumbnail', 3, {alpha:'1', delay:0.2},0.1); Here's the page: http://skyline.thisisstatic.com/press.php The fading animation appears to start, then hangup momentarily, and then quickly fast forward through the rest of the animation sequence. It seems like there's a JS or CSS conflict happening somewhere, but for the life of me I can't uncover it. I've disabled all the other JS and CSS on the page as well, but still haven't gotten the animation to run as expected so I'm a bit stumped (I've used GSAP countless times in the past with no trouble). In case it's helpful, I'm using the latest GSAP files and the following plugins: http://packery.metafizzy.co/ https://github.com/davist11/jQuery-Stickem If anyone has any thoughts on this I'd appreciate it. Thanks, Brett