Jump to content

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

joe_midi last won the day on August 24 2016

joe_midi had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. joe_midi's post in Movement looks bad on Firefox was marked as the answer   
    Try adding a slight rotation or z:
  2. joe_midi's post in Animating with a Click: Code not Working was marked as the answer   
    Hey @amanfromsolan!
    I noticed two things about your code:
    var button = document.getElementsByTagName("button"); button.onclick = navAnimation.play(); getElementsByTagName will actually return an array of all the elements with that tag name, so you'll need to place the click onto its index within the array, like button[0].
    And you need to assign on click a function, rather than associating navAnimation.play() to it.
    So more like:
    button[0].onclick = function() { navAnimation.play(); }
    See the Pen vXggyV by joemidi (@joemidi) on CodePen
  3. joe_midi's post in Banners ad tweenlite (or tweenmax) loop without click was marked as the answer   
    @electricalessence: You need to actually call Dipscom's loop function at some point. Just as you are calling anima(); within the HTML to start the banner, you need to call startLoop(); at some point to start the loop. Something like this in your current configuration.

    See the Pen EgamyB by joemidi (@joemidi) on CodePen
    However, if you are able to use TweenMax instead, you get the added benefit of being able to use TimelineMax, which simplifies the process a lot.
    This would be the same animation using TimelineMax:

    See the Pen wzBdzP?editors=0010 by joemidi (@joemidi) on CodePen
  4. joe_midi's post in Path data malformed was marked as the answer   
    Codepen URL: 
    See the Pen RGwPmJ?editors=1010#0 by joemidi (@joemidi) on CodePen
    Just changed your id names.
    I assume its doing what it should be as there are no longer any errors.
  5. joe_midi's post in Is there a "playTo" or equivalent function for Timeline? was marked as the answer   
    I think you want this:
  6. joe_midi's post in Title Animation was marked as the answer   
    Hey Yesvinkumar,
    Welcome to the Greensock Forums!
    If you want to build up an animation sequence using GSAP, the best way is to use TimelineLite or TimelineMax, its totally what it was made for.
    Now, when you say interval between a multiple tween, I assumed to mean you want a pause when before the title text animates out.
    Attached is a CodePen of your animation using TimelineLite with a 2 second pause before the text is animated out.

    See the Pen BzgmNK?editors=0010#0 by joemidi (@joemidi) on CodePen
  7. joe_midi's post in H5 Validator - Advanced HTML check "SVG_INVALID" was marked as the answer   
    Did you see this post: http://greensock.com/forums/topic/12636-malformed-assets/?p=57431
    Also, it would help if you used the feedback button in the bottom right corner to ask them to be more descriptive with their error messages.
  8. joe_midi's post in JS stupid I am. Couldn't get the first lesson to work. was marked as the answer   
    From your codepen, you need to put the value in parenthesis:
    so left:"180px" and not left: 180 px
    TweenMax.to(".logo", 4, { left:"180px" });
  9. joe_midi's post in GSAP Run Problem was marked as the answer   
    I think because you are calling GSAP straight away rather than letting the page load is the issue here. There isn't a problem with library, its just that its not available to the browser when it reads that script tag.
    You are already using a document ready function with your jQuery, so you might as well place it in the bottom of that:
    $(document).ready(function(e) { $(function(){ $("#main_nav > a").on("click, touchstart", function(event){ event.preventDefault(); }).on("touchend", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }).on("mousedown", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }); $("#main_nav > li a").on("mousedown", function(event){ $("#main_nav").removeClass("active"); }); $("body").on("mouseover", function(event){ if( $("#main_nav").hasClass("active") && ! $("#main_nav").is(':hover')) { $("#main_nav").removeClass("active"); } }); }); var wind=new TimelineMax(); var repeat=wind.repeat(7); var crazygo=repeat.yoyo(4); wind.to("#main_nav",0.5,{transformOrigin:"50% 0",rotationX:"15",transformPerspective:"125"}) .to("#main_nav",0.4,{rotationX:"12px"}) .to("#main_nav",0.6,{rotationX:"-25px",transformPerspective:"125"}); }); You could also place this script tag at the bottom of the document before the body tag closure.