Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ZachSaucier last won the day on June 30 2019

ZachSaucier had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. ZachSaucier's post in Collapsing <hr/> to the center was marked as the answer   
    Hey rustytusk and welcome.
    If you just need to change the visual state of the hr, you should use transforms instead. In your case, that means you should use scaleX instead of width. This will fix your centering issue as well
    $('.hr1 button').click(function() { if(hrOpen) { // TweenMax.to($('.hr1 hr'), 0.5, { // width: 0 // }); TweenMax.to($('.hr1 hr'), 0.5, { scaleX: 0 }); } else { // TweenMax.set($('.hr1 hr'), { // scaleX: 0 // }); // TweenMax.from($('.hr1 hr'), 0.5, { // width: 0 // }); TweenMax.to($('.hr1 hr'), 0.5, { scaleX: 1 }); } hrOpen = !hrOpen; }) Here's
    See the Pen KzQVPb?editors=0010 by Zeaklous (@Zeaklous) on CodePen
    I also left commented a way to transition the width from 0 to auto by using a set command. However, this approach will not transition from or to the center without some ugly work arounds
  2. ZachSaucier's post in Stop autoplaying mobile menu was marked as the answer   
    Hey Phillip,

    You can follow the approach marked in this post and toggle between .reverse() and .play():
    See the Pen adxyXQ?editors=0010 by Zeaklous (@Zeaklous) on CodePen
    . function menuFunction() { menu.reversed() ? menu.play() : menu.reverse(); }; Just make sure to .reverse() the original timeline
  3. ZachSaucier's post in Optimal TextPlugin usage for a beginner creating a hover map. was marked as the answer   
    Hey ikesaunders, welcome to the GSAP world!
    This isn't really a GSAP question, but in short yes you can. One way to do it would be to use a data attribute and call that inside of your box class' hover function:
    TweenLite.to(hoverText, 0, {   text: $(this).data("text"),   ease: Linear.easeNone });
    See the Pen GoedYZ?editors=0011 by Zeaklous (@Zeaklous) on CodePen
    The key here is to use the this keyword which, since it's inside of the box hover function, refers to the box being hovered
  4. ZachSaucier's post in Animating GSAP particles with no jQuery was marked as the answer   
    By replacing the jQuery selectors, the .width and .height function (with scrollWidth & scrollHeight), and .append function (with createElement and appendChild) I was able to use Diaco's pen to do a non-jQuery version:
    See the Pen obQmOM?editors=0010 by Zeaklous (@Zeaklous) on CodePen
    You can do this in the future by finding each $() part and replacing it with the vanilla JS form as well as the following .function() calls if they are jQuery functions
  5. ZachSaucier's post in Is there a way to translate the x: value a number of times using repeat? was marked as the answer   
    There could be a more GSAP way to do it, but this can be done by looping it inside of a for loop as opposed to using the repeat attribute:
    var currX = 50,     tl = new TimelineMax(); for(var i = 0; i < 4; i++) {   tl.to(".red", 1, {x:currX})     .to(".blue", 1, {x:currX});   currX += 50; }
    See the Pen EPoJBx by Zeaklous (@Zeaklous) on CodePen
    This may be the only way due to the fact that the value of the tos cannot be changed on repeat (i.e. new Tweens have to be created).