Dayo

Hello Sahil, Aha, so thats why Rookie misstake i guess, thanks for clearing that up! Thank you again, have a nice day!

Hello, i'd like to start by saying thanks for an awsome library! Now to the problem: I have a navigation menu which should display a submenu when hovering a link. This works fine but when i drag the mouse over multiple links the animation displaying the submenu continues which looks bad go ahead and try in the codepen: https://codepen.io/anon/pen/wPPrLK?editors=1111). How can i make the animation stop? I did try to set tl.clear() like this, in both the mouseenter and mouseleave functions : tl.clear() .to(".activeMenu ul", 0.25, {autoAlpha:1}) .to(".activeMenu ul li", 0.25,{autoAlpha:1, ease:Power0.easeInOut}); But then the ul remains visible. Any help is much appriciated, thank you and keep up the good work!

Hello Jack! Thanks for the answer. Yes I'm trying to apply the effect to a regular DOM element, all i have is a gallery with images and they all have the class .img-responsive. So maybe this is not the plugin for me then? Do you have any other suggestions on plugins to create brightness or colorize on an image when you hover it? Here is a codepen but I don't have pro so i can't upload all the js files that are required. I use: EasePack.min.js TweenMax.min.js easeljs.min.js ColorFilter.js ColorMatrixFilter.js CSSPlugin.min.js EaselPlugin.min.js http://codepen.io/anon/pen/vxxYRP Sure i'll start a new thread next time, I just thought it would relate to the thread and the last time you wrote in the thread you hinted that it might be possible to target dom element in the future Thanks

Hello! I've been trying to create an exposure effect when i hover an image, but to no luck. Been reading on multiple threads on the topic and as i understand it i need to use the .cache function on my image but i don't understand how it works for images. I'm already using images on the site (using drupal) so i'm not sure how to make them being displayed via easljs since i load them in drupal. Also do i need to use the canvas element in order to get this to work at all? Any help is much appreciated, thanks (function ($) { jQuery(document).ready(function(){ $('.img-responsive').cache(600, 350); $('.img-responsive').hover(over, out); function over(){ TweenMax.to(this, 2, {easel:{exposure:1.5}}); } function out(){ TweenMax.to(this, 2, {easel:{exposure:1}}); } }) })(jQuery);

Hello, Yes I'm developing using localhost so the code was a bit of, sorry for that. Iv'e updated the codepen and now it shows an image with the effect. This codepen seem to work for me at least and like i said before, half of my gallery works fine but the other side flickers. I know iv'e run in to the problem of flickering animation in chrome before but i can't remember what code it was to fix it, i believe it was some javascript that should be placed on the first line in the main.js file. UPDATE: So iv'e tried a few solutions and this one seem to almost fix the problem: In my css i add: -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; When this is added the zoom effect works on the image but half of the image get invisible when u first hover over them, then they return visible and works as expected, so basically the first hover gives me the problem for some reason. I also tried: TweenMax.set($('.tile'), {transformStyle: "preserve-3d", transformPerspective: 600}); And that seemed to fix the flickering problem but for some reason i have to hover on the bottom of some images for the zoom effect to trigger. I used the code from this thread https://greensock.com/forums/topic/10517-3d-transform-issue-in-chrome/ Another update: So i fixed the problem, before i targeted the .tile class in the figure element and that did not work on all the images, i changed the class to one i'm using on the img element .img-responsive. The code that fixed the flicker problem was this: TweenMax.set($('.img-responsive'), {transformStyle: "preserve-3d", transformPerspective: 600}); Thanks for the help

Hello! I'm trying to create a simple hover effect on images in a 2 column gallery. I use drupal 8 and iv'e included the html code for one of the images in the gallery http://codepen.io/anon/pen/ZLPJQL The problem is that everything works in firefox but in chrome the animation flickers and the images goes invisible for a while before returning to normal (only on the right side of the gallery weirdly enough). Iv'e had this problem with chrome before and seen some threads on it but i can't remember what code it was that fixed the flicker problem. Iv'e tried setting force3d:true but it did not help. I'm using Jquery in the .js file beacuse i got errors when i was using the original script which looked like this: <script language="JavaScript" type="text/javascript"> $('.tileImage').hover( function () { TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut}); }, function () { TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut}); } ); </script> Any help is much appreciated, thanks for a great tool!

Hello! I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif The only thing difference is that i want each bubble to move a bit sideways as well. I found most of what i needed on the forum but now I'm stuck. As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it, the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. Any help is much appreciated! Thank you

Thank you very much for the help! That was what i was looking for, sorry if the question did not relate so much to gsap. I will keep that in mind in the future. Thank you for your time!

Hello friends of gsap! This is my first post here but i suspect i will return since gsap is awsome! I'm trying to make a rotating circle with arrows pointing at each word. Here is an image that shows what I'm trying to do. http://boxesandarrows.com/files/banda/prototyping-with/iterative_prototyping-small.gif How can i achieve this? I tried using css border and images but I don't know how to apply it the correct way so the arrows rotate with the boxes as seen in the codepen. I want the arrows to basically point on each box. Thank you for your time and keep up the good work!