emilychews

Thank you both. It'd been a long day and that is a tad embarrassing. Ten thousand apologies.

Hi, I have a custom cursor I'm doing with GSAP, which all works OK when I move it around the page. I'm trying to add a "mouseover" event listener so when you hover over a link the cursor grows, not only is the function I'm using for this not working, but it breaks the entire custom cursor, but I can't work out why this is happening? I've commented out the problematic "mouseover" function in question (at the very bottom of the Javascript) so you can see how the custom cursor should look, can anyone give any suggestions as to why it breaks? Em

Thanks for the pointers.

Hi, It is possible with Greensock to create something similar to this: https://www.studiotreble.com/ From what I know GSAP doesn't do effects and filters? I've looked at pixi.js this morning, but I don't really want to have over 400kb of JS for one effect and I am a bit pushed in terms of learning an entirely new library (I'm currently having to learn React / Vue as well). And besides I love Greensock and find it to be the only library where the learning is actually fun. Is a liquid animation effect possible with just SVG / Greensock? Or does anyone have any pointers how to learn this natively (would it fall under webGL? Which is something I haven't really looked at yet). Thanks in advance for any tips or pointers. Emily

Hi @OSUblake and @ShaunGorneau Thanks for both answers this is fabulous (and apologies in the delay in coming back to you both). Em

Hi, I have a series of shapes within an SVG I'd like to apply a tween to randomly - how would I go about this? In the attached CodePen example I have 9 dots and I'd like it so one animates in and out, followed by a different one selected at random. (currently all the dots are animating at the same time) I'm guessing I'll have to loop through the dots class and have it pick one of them at random? I'll be honest though, I'm struggling how to get this to work. Any pointers would be wonderful. Em.

Thanks Sahil, that's great. My general JS knowledge isn't yet what I need it to be. Much appreciated.

Hi, I'm trying to use the ternary operator on a tween to have two different colours depending on the window size of part of a menu after being clicked. The actual animation is part of an SVG timeline, but I've simplified it down in the codepen with one div. What I'm trying to do is use the ternary operator to change the color dependent on window size. In the past I've used it on animation duration values like this: .to("#square", window.innerWidth > 736 ? 1.5 : 1, {opacity: 1}) I can't seem to get it work on tween property values inside the curly braces though? Doing the following won't work: .to("#square", 1, {window.innerWidth > 736 ? background: "red", : background: "blue" }) Is there a simple way within a timeline to have an if/else or ternary operator on the property:value pairs of a tween, that I can change dependent on window size? The only other option I guess would be to duplicate the entire timeline in another if/else statement

Hi @PointC / @Jonathan, I got it to work, I think perhaps my question could have been slightly clearer, Craig's answer worked if I did it outside of the main timeline. I thought you could use conditional logic to fire an individual tween during a timeline, but I couldn't get that to work. When using the if statement after the timeline it did work as expected. Many thanks for taking the time to help. Em

Your codePen example doesn't seem to be working? Also, won't that mean duplicating the entire code block which is something I'm trying to avoid, i.e. i'll have to then do an block of code for the non-home page variation. I mean, if that's the only way to do it, that's fine, I just had it in my head I'd be able to tweak one line of a timeline dependent on what page the user was on. Thanks,

Hi, I have a menu animation where the menu on the home page has an extra element. Instead of duplicating a timeline for this animation (which is quite complex) I'm trying to use the ternary operator in the timeline so that when the user in on page-1 (the home page), this element on the timeline animates. Because the animation is quite complex I've done a basic unrelated animation in the attached CodePen to show the problem. Basically, I want the second block to only animate when `.page-1` is present (which is a class I've added to the page-wrapper in the example), but not throw an error when it isn't there on the other pages. I've commented out what I was trying with box2, which does animate as expected, but it still throws an error on pages without this element, and obviously I can't show the errors on other pages because of the nature of CodePen being a single page application. Any help would be awesome. var tl = new TimelineMax({repeat: -1}); var box1 = document.getElementsByClassName("box-1")[0]; var box2 = document.getElementsByClassName("box-2")[0]; var box3 = document.getElementsByClassName("box-3")[0]; var page1 = document.getElementsByClassName("page-1")[0]; tl .add("start") .from(box1, 1, {y: 10, opacity:.3}) // .from(page1 ? box2 : undefined, 1, {y:10, opacity: .3}, "start") .from(box3, 1, {y: 10, opacity:.3}, "start")

Hi, I have a timeline (inside a function) that I want to pause when a window is above 737px (it's a simple animation to replace a video that is present on larger screens). So I've set up a resize event, and as expected when the window loads at greater than 737px the timeline is paused and when I resize the window to < 737px, it does then play the animation. All good. However, when I either load the window below 737px (or resize the window more once when I've loaded the window initially at a window size greater than 737px) it doesn't pause? I've recreated the problem with a rotating div in the attached Codepen. Any help, ideas or suggestions very welcome. Em. var tl = new TimelineMax(); function animation() { if (window.innerWidth < 737) { tl.to ("#div", 3, {rotation: 360, repeat: -1, ease:Linear.easeNone}); } else { tl.pause } } animation(); window.addEventListener("resize", animation, false)

@OSUblake and @Shaun Gorneau Thanks for both answers (and added explanations).

Hi Shaun, Thanks for this, it has really confused me though - I thought unshift() was for adding elements to an array ? Although it works, I don't actually understand how? Em

Hi If I have a staggerFrom tween that runs from left to right, is there anyway of having the stagger go from right to left on a series of elements? I don't want to reverse the timeline because the stagger is part of a wider / larger animation and when I use the .reverse() method it obviously reverse the timeline. I've given a simplified example below (Codepen example included). The red box comes in from the top and there is a stagger on the blue boxes that come up from the bottom (going from left to right). Is it possible to stagger the blue boxes so they still come up from the bottom, but stagger from right to left? Many thanks var tl = new TimelineMax({repeat: -1}); tl .from("#box", .8, {y:-60}) .staggerFrom(".box", .8, {y:60}, .15)

@Thanks PointC

Hi, Is it possible to create a timeline that after playing for the first time, when it repeats it starts from a different point in the timeline? In the example below (CodePen included) I'd like the timeline to play through once from the start, and then after this when the repeat kicks in I'd like it to start from the "start" label. It will basically remove the initial fading in off all the elements after the first play. var tl1 = new TimelineMax({repeat: -1}); tl1 .to(".box", 2, {opacity: 1}) .add("start") // would like animation to start from here when repeating .to("#box-1", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-2", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-3", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-4", 1, {scale: 0, ease:Power0.easeNone}) Many thanks

Hi Sahil, Thanks for this. The reason I've used functions is because the animations are part of more complex animations on the site, but I didn't want to include this other code because it was unrelated to this issue. I do also have to wrap the event listeners in an if statement because otherwise it throws an error on the other pages of the site (cannot tween a null target) that don't have that button. Although I have subsequently realised I can wrap both event listeners in the same if statement. Thanks again.

Hi I have a mouseenter / mouseleave effect on a button. I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation. I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference // GSAP / JS // --- button fade in function, invoked in subsequent timeline function buttonFadeIn() { var tl = new TimelineMax(); tl .to(".btn", 1, {opacity: 1, ease:Power3.easeIn}) .to(".btn a", 1.8, {opacity: 1}) return tl } // --- invokes initial fade in on pageload function homeTitles() { var tl = new TimelineMax(); tl .add(buttonFadeIn()); } homeTitles(); // --- mouseenter / mouseleave on 'Learn More' button var learnMore = document.getElementsByClassName("btn")[0]; // --- function that is invoked on mouseenter/ mouseleave function learnMoreHover () { var tl = new TimelineMax(); tl .to(learnMore, .3, {opacity: .3}) return tl; } if (learnMore) { learnMore.addEventListener("mouseenter", function(){ learnMoreHover().play() }, false); } if (learnMore) { learnMore.addEventListener("mouseleave", function(){ learnMoreHover().reverse() }, false); }

OK fair enough. I assume the best way to do this with a simple mouseenter/ mouseleave tween?

** I seem to have hit the back button when posting this so it has posted twice - feel free to delete the older version** Hi I have a tween where I am scaling a div with a class of .btn, which i'm scaling on its x-axis with scaleX. I also have a hover effect on this button after it has animated in, and on this hover I've put a CSS transition. The CSS transition changes the behaviour of the tween and I've tried a few things to try and overcome this, but I'm getting nowhere. My question therefore is, is there a way to have an element animated with greensock (in this case on pageload) and also allocate a CSS transition to the element for other interactions (i.e. a hover effect) after the animation has finished? GSAP TweenMax.to(".btn-scale", 1, {scaleX:1, delay: 1, ease:Linear.easeNone}); CSS .btn { border-radius: 1px; padding: 1.2rem 2.2rem; letter-spacing: .5px; cursor: pointer; transition: 0.6s; letter-spacing: 1px; background-color: #1D2F42; width: 200px; } /*for greensock*/ .btn-scale { transform-origin: left; transform: scaleX(0); }

Hi I have some odd behaviour when translating a div that is 100% of the viewport width and height when I translate it in an out of the viewport itself. The example is a simplified example of what's going to be a slide-in menu sitting off the viewport using translateX: -100% in my CSS. When I animate it in and out, it works OK using xPercent. But when I resize the window it doesn't work. I tried using vw units with the normal x: property but this created other problems. How do I get the behaviour that happens when the code first loads, to work after the window is resized? When I use scaleX on the element I don't encounter the issue (for obvious reasons I guess), but sadly I do need to translate the element in this instance because it will contain text. Any help would be fab var button = document.getElementById("button"); var menuClicked = false; var menuAnimation = new TimelineMax(); function menuIn() { if(menuClicked === false) { menuAnimation .to("#main-nav", .75, {xPercent: 100}); menuClicked = true; } else { menuAnimation .to("#main-nav", .75, {xPercent: -100}); menuClicked = false; } } button.addEventListener("click", menuIn, false)

Oh OK, thanks Blake. I thought it would be handy in terms of sending animations etc to clients as img files etc and when they're happy just dropping them into an <img> tag. It was more the surprise at seeing it done than perhaps the practical applications of it in hindsight that got me excited.

Hi I was looking at this site today https://envylabs.com/ and if you scroll down to the 'Proven Services' section of the homepage they are animating a .svg image file. I was always told this isn't possible? Is this something that can be done with Greensock? The animations are straightforward enough, but I don't know how they've managed to animate the contents of a .svg file and then use it inside an <img> tag. Many thanks Emily.

Thanks Blake that would be amazing.