emilychews

Blake - that is amazing. I'm genuinely absolutely gobsmacked. I've just been doing a bit of googling - to transfer that so it also works on the up and down arrows on my keyboard as well, will I duplicate the code in the onWheel function, into a function called say, onArrowPress, and then add two event listeners for a keydown event using the relevant key codes for the up and down arrows (38 and 40)?

I tried looking at the code initially, but the main.js file is 28,000 lines of JS where they've concatenated all of their JS files into one. It's a beautiful effect. I don't know why other browsers won't introduce smooth scroll like firefox have. Chrome when using a normal mouse/mouse wheel is so horrendously juddery when scrolling these days. I've been doing further research, and I think it's going to be more of a long-term learning curve to get that type of effect :). GSAP should do a paid smooth-scroll plugin for mouse-wheels, they'd make a small fortune Thanks for the above. Emily.

Hi Is it possible with GSAP to create a smooth scroll type animation for mouse-wheel functions? The scroll judder on Chrome on a Mac is awful (chrome have removed the ability to smooth scroll on Mac OS for good apparently) and I've seen this site where the scroll is absolutely buttery smooth with a mouse well on mac for chrome when using a third party mouse (i.e. not an apple trackpad or magic mouse). http://www.goodkids.studio/ I'm not concerned about certain animations being triggered by scroll events because I know there are libraries out there that do that. It's more the smooth scroll itself. Because GSAP is so buttery smooth I'm wondering if it is possible with GSAP? Any ideas as to how they've done this would be amazing. Emily.

Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.

Thanks that was all really useful info. Emily.

Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily

Oh my. Time for a club Greensock membership me thinks. Thanks for the info.

Hi Is it possible to add a staggerTo or staggerFrom to all the lines of text in a paragraph programmatically? I appreciate I could wrap all the lines in spans, but it's part of a piece of text that won't be fixed in size, so the number of lines will change dependent on device, window size. Also, is this a bad idea generally in terms of performance? I've included a codepen above with two paragraphs that are part of a stagger, but I was wondering about having each line stagger (note: if it is possible I would put all the text within one element / #id. I just did two elements in the example so i had something to stagger). Any ideas / suggestions welcome. Emily

Thanks Point C. I was returning the timeline and placing this in the setTween method, as opposed to putting the function inside the setTween method. Emily.

Hi Is there any way to make a timeline that is inside a function accessible outside of it? I have a short animation sequence used in different places on a site. I'd like to wrap the timeline in a function, but the problem is I'm also using scroll Magic. Thus the setTween method of scrollMagic needs you to pass the name of the tween in as a parameter. I tried using return with the timeline name (as return myAnimation) at the end of the function, but this didn't work. I've set up a simplified example codepen (link given above and minus the scrollMagic) to make it easier to illustrate any solution. I'm thinking there must be a way to make a timeline accessible outside of a function? Any help would be amazing. Emily.

Ah - got it. Thank's Jack.

Hi, I have a menu trigger button that appears on a page in more than one place, so i've used classes as the selectors. I've worked out how to loop through the classes and toggle different functions to be called using an if else statement, but I can't seem to get this to work with tween max tweens. I've commented out a tween in the code below, which does the same as the vanilla javascript that is inside the same function, but i can't get it to work. How do i get a tween to be called as a current target? Any help would be awesome. Emily As well as the codepen above, here is the JS code for quick reference. var clicked = false; // sets the clicked state var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); // button to be clicked function newColor(e) { e.currentTarget.style.background = "black"; } function originalColor(e) { e.currentTarget.style.background = "red"; // e.currentTarget.TweenMax.to($mainMenuButton, 1, {background: 'red'}); } // loop through instances of the class and add functions dependent on the click state for (h = 0; h < $mainMenuButton.length; h +=1) { $mainMenuButton[h].addEventListener('click', function(e) { if (clicked === false) { newColor(e); clicked = true; // changed the clicked state } else { originalColor(e); clicked = false; } }); }

Thanks Point C. That's really good to know and I'll have a play around with it tomorrow. Because it was two separate functions and two event listeners (scroll and click), I ended by finding a solution using jQuery's offset() method in relation to the menu's position coordinates (bit of a hack). But I have to say the original answer was really informative and I've been scanning the docs on some of the other related methods that I didn't know existed, and as per my first reply, the isActive() method did solve a separate issue i was having on a different part of the site so i'm defo hugely grateful!! Thanks again, Emily. P.S - sorry for saying OMFG! in my first answer, it wasn't very professional.

Actually, although that does work, there is side effect. If I use the isActive() method it does prevent the menu sliding off screen again mid-animation if the user scrolls (good), but when the animation is complete, it stops the scroll triggered tween from working if the scroll wheel has been used during the animation. http://codepen.io/emilychews/pen/PpXaNV The function is between lines 57 and 74. On line 61 the isActive() if statement does what I need. I need to work out how to effectively kill off that if statement once the menu has animated back into view. Emily

OMFG ! That's amazing. Thanks so much Point C. I had one person slate me on one of the javascript forums about why I should use CSS and the add class / remove class methods which i didn't want to do because of all the extra code and difficulty in getting everything to integrate when i was trying to use setTimeOut(). Sometimes it hard to grasp stuff when you're new to coding (although its steadily getting easier). You're such a legend. It also solves a different issue I had on a tween, which will now be making its way back like the Resurrection. Emily :)

Hi, I have a side menu that is present on a page after page load. You can then slide the menu off the screen by either scrolling 1px or clicking the 'X' on the menu. When the menu has disappeared from a view a 'Menu' button shows and if you click on it, it brings the slide menu back in. Once again to complete the cycle you can get rid of this menu by either clicking the 'X' on the menu or scrolling 1px up or down. There's a bug in the code though which I found accidentally, which is purely of my making and i can't seem to get rid of it. Problem: When the menu has been closed and all you have is the 'Menu' button, if you click this button and accidentally scroll as the menu slides back in, the Tween that is fired by the 1px scroll hijacks the click Tween and it slides off again. Is there any built-in functionality in GSAP to prevent one timeline firing whilst another one is animating? (effectively making it null for the duration of the other animation). I've been going around in circles trying to solve it with setTimeOut(), but I don't think this is the correct way to approach it. The GSAP code is below and there is a pen to illustrate the problem here http://codepen.io/emilychews/pen/PpXaNV Any help / ideas would be awesome. Emily jQuery(document).ready(function($){ // global var for menu container var $menuContainer = $('.menu-container'); TweenMax.set($menuContainer, {x: '-100%'}); //set the menu off the screen before sliding in on page load TweenMax.set('.showMenu--button', {autoAlpha: 0}); // Button that appears after the Menu slides away // slides menu in on page load function bringInMenu(){ var menuIn = new TimelineMax(); menuIn .to($menuContainer, .9, {x: '0%', ease: Power1.easeOut}) .from($menuContainer, .5, {skewX: '2deg', transformOrigin: 'bottom right', ease: Power1.easeOut}, '-=.5') .to('.downarrow', 1, {y: -20, repeat: -1, yoyo: true, ease: Power1.easeOut}); // animated down arrow }; bringInMenu(); // Close menu with the 'X' on the menu itself $('.menu-x').on('click', function(){ var closeOnClick = new TimelineMax(); closeOnClick .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); }); // Close the menu on scroll var scrolled = false; $(window).scroll(function() { if ( !scrolled && $(document).scrollTop() > 1) { var closeOnScroll = new TimelineMax(); closeOnScroll .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); // reveals menu button scrolled = true; // update the scroll state } }); // ClICK FUNCTION TO BRING BACK MENU $('.showMenu--button').on('click', function() { var desktopMenuClick = new TimelineMax (); desktopMenuClick .to($menuContainer, .3, {scaleY: 1, transformOrigin: 'top right', ease: Power1.easeIn}) .to($menuContainer, 1, {x: '0%', ease: Power1.easeIn}) .to('.showMenu--button', 1.3, {autoAlpha: 0}, '-=1.3'); scrolled = false; // resets scroll state to false }); }); // end of jQuery

*** AMENDED - i found out what was causing the secondary problem after removing scroll magic Hi Thanks Shaun - although I am using Scroll Magic on the site for other things, I took Scroll Magic off this tween as you recommended and have used scrollTop() instead with jQuery, (this also means i can use position: fixed without any problems). I seem to have a hit what looks like a minor (but two hours later) albeit painfully frustrating side-effect. I have it so when you scroll further than 1px down the menu slides away, and when the scrollTop() === 0 the menu comes back in. There seems to be a strange delay on the menu coming back in though. I've tried restructuring the else if statement into separate functions, but to no avail? Sometimes if feels like 2-3 seconds. How can i have it so the menu comes straight back in when a user goes back to the top, without the delay / lag. I really appreciate yours and Jonathan's assistance so far. I've updated the Codepen here : http://codepen.io/emilychews/pen/WpYgWe?editors=1010 Emily

Hi Guys I have a simple Tween that I'm linking to a scroll magic trigger. I'm unsure if my problem is GSAP related or Scroll Magic (if it is a SM issue I appreciate this is off topic). Basically I have GSAP and the GSAP for SM plugins running (i've copied the stacking order for the scripts into the codepen JS settings to mirror what i have running on the site), and I would like it so when the user scrolls the tween is fired. What is happening though is the Tween I have loaded into the scroll magic controller if firing on page load. I've made a really simplified version of the problem here : http://codepen.io/emilychews/pen/WpYgWe Any help or suggestions would be amazing. Emily.

Got it. Thanks for that PointC

Hi Chaps, I'm just mapping out a Greensock animation and I've noticed there is a very minor delay between tweens on a timeline. Is this dictated by the graphics processor / quality of my device, or is there a very small delay added as default? In the attached codepen link I've done a tween of a box moving on the x and y axis. On the final tween I've put a negative delay value of '-=0.15' to fire the tween early, and the tween seems to fire immediately. I appreciate by default there probably has to be some minor delay otherwise the movements could look too unnatural / move unnaturally fast if not. The reason I ask is the timeline I'm building is going to be quite a complex animation and knowing any default value may well be useful. If there isn't, I guess I'll have to eyeball it. Thanks as ever, Emily.

Thanks for this. I'll look at it properly tomorrow on my computer (as in, not on my phone), but that looks great. It's taken me days to get it to where I am now...I can only dream of being able to use JS like you guys in the future. Can i ask? I've been using JS for about 9 months now. How long did it take you to be able to use it like you do? JS is my first programming language and some of the stuff on this forum and what GSAP do is incredible. I kind of wonder if it's going to be beyond what I'll ever be able to do / understand in terms of problem solving.

Hi Blake / Shaun, I'm almost there. I've managed to get the effect I was after to work, but I've really hit a wall for the last few hours in terms of removing the cloned element in the context of GSAP. The new codepen is here http://codepen.io/emilychews/pen/LWbxpX When the cloned element goes back into position I can't seem to be able to remove the clone after the reversed animation. In the pen I've commented out the original code that was causing the clone to be removed, but when I try and integrate it into the animation, at the end it either just makes the cloned div just disappear (without animating) when I close the element or, as is the case at the moment, the timeline reverses but the cloned div stays. Also I can't get it so when the cloned div is enlarged the other images are not unclickable, which used to be the case as well. Any help would be awesome. Emily.

Sorry Blake, I didn't even see your answer. A thousand apologies! That looks very good, and thinking about it, I could probably have a play around with that pen and see how near I can get it. I wouldn't want it full screen because it's going to be for an image library with downloadable images, so the image clicked on will be a smaller version of the downloadable hi-res image, which could look blurry at 100vh, but I'm thinking getting it to centre in the viewport at 50vh with that foundation of code may not be as daunting as first thought. I loved your business card animation on that page as well btw. Thanks again. Emily.

Hi Shaun, Thanks for that, that's really useful to know. The effect I wanted was when the transformation moves the image from where it is on the page to the center. In doing some further research for this I came across a JS script that does this called photoswipe.js and looking at the complexity involved at what I want to achieve, I think the best thing is going to be to just use that script / plugin. What you showed though was incredibly helpful for another less complex problem I was trying to resolve, and the whole concept of using TweenMax on click handlers was a lot simpler than I imagined. Thanks Emily.

Hi I'm going to be adding an image gallery to a site and I basically have it so that when you click on an image, the image is cloned and reappears in the centre of the window. The codepen is here: http://codepen.io/emilychews/pen/YZGxWZ I would like it so that the cloned image goes through a transformation to arrive in its new position. At the moment when you click on the image, the clone just appears in the middle of the window. I can't seem to get my head around how to have it so wherever the image is on the screen, it smoothly transitions to the central position. I tried swapping out the CSS object in my JS with some tweens, but this was a bit of a non-starter. I'm quite up on the functionality of Greensock tweens and timelines now, however, I'm at a bit of a loss how to approach this. Any help or pointers would be amazing. Emily. For quick reference I've also cut and pasted the JS / HTML and CSS code below: JS $(function() { // ===== vars to evaluate the left positioning after the element is cloned. var $windowWidthMiddle = $(window).width()/2; var $holderWidthMiddle = $('.holder').width() * 1.5 / 2; var $left = $windowWidthMiddle - $holderWidthMiddle; // ===== vars to evaluate the top positioning after the element is cloned. var $windowHeightMiddle = $(window).height()/2; var $holderHeightMiddle = $('.holder').height() * 1.5 / 2; var $top = $windowHeightMiddle - $holderHeightMiddle; // ====== Clone each image when clicked - these all have the default class '.holder' $('.holder').on("click",function() { if ($( this ).find(".cloned").length == 0) { // if not cloned already var $myClone = $(this).clone() .insertAfter(this) .addClass('cloned') .css({ position: 'absolute', left: $left, top: $top, transition: 'all 1s' }); // ===== This adds the small 'x' to the cloned image to close it $myClone.prepend('<div class="closeX">X</div>'); } }); // ====== This is what causes the cloned image to be closed / removed $(".wrapper").on("click", ".closeX", function(e) { e.stopPropagation(); // this stops the click on the holder $(this).closest("div.cloned").remove(); }); }); CSS .wrapper {width: 100%; height: 100%;} /* This is each image before cloning */ .holder { width: 20vw; height: 100px; background: red; position: relative; margin-bottom: 5px; display: inline-block; z-index:0; transform-origin: top left; color: white; } /* The positioning 'top' and 'left' values after cloning are added in the javascript */ .holder.cloned { background: blue; z-index: 20; transform: scale(1.5); } /*CSS for the prepended 'x' that shows on the cloned element*/ .closeX { position: absolute; background: yellow; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; color: black; } HTML <div class="wrapper"> <!-- five images --> <div class="holder image1">Image 1</div> <div class="holder image2">Image 2</div> <div class="holder image3">Image 3</div> <div class="holder image4">Image 4</div> <div class="holder image5">Image 5</div> </div>