emilychews

Members
  • Content Count

    50
  • Joined

  • Last visited

Community Reputation

16 Newbie

About emilychews

  • Rank
    Advanced Member

Recent Profile Visitors

572 profile views
  1. emilychews

    Select Individual Shapes in an SVG Randomly when Tweening

    Hi @OSUblake and @ShaunGorneau Thanks for both answers this is fabulous (and apologies in the delay in coming back to you both). Em
  2. 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.
  3. Thanks Sahil, that's great. My general JS knowledge isn't yet what I need it to be. Much appreciated.
  4. 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
  5. emilychews

    Using the Ternary Operator to trigger a tween on a timeline

    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
  6. emilychews

    Using the Ternary Operator to trigger a tween on a timeline

    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,
  7. 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")
  8. 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)
  9. emilychews

    Reverse a Stagger Direction (not reverse Timeline)

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

    Reverse a Stagger Direction (not reverse Timeline)

    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
  11. 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)
  12. emilychews

    Repeat Timeline from a Different Starting Point

    @Thanks PointC
  13. 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
  14. emilychews

    Cannot Reverse a Played Timeline

    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.
  15. emilychews

    Cannot Reverse a Played Timeline

    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); }