Jump to content
Search Community

redrooster

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by redrooster

    clearprops issue

    in GSAP

    Posted

    Hi all,

     

    I am having an issue clearing props as per the codepen attached.

     

    On mouseenter, I want to animate each column to 100% width and translate its x position to 0 (so rectangle covers 100% width)

     

    On mouseout, I want to reverse the animation to its start state but also remove the translate GSAP injects.

     

    When I add:

     

    onReverseComplete: function() {
       tl.set(swatches[i], {clearProps: 'transform'});
    },

     

    it is not acting how I expect and does not remove any props, it retains a pixel value for the translate....this means when browser is resized all coluns are not aligned.

    See the Pen dyqvXvN by marklawrencedesign (@marklawrencedesign) on CodePen

    HTML CANVAS - Animating and Array of values

    in GSAP

    Posted

    I added a check to compare the old / new arrays and made them the same length before they go into the GSAP animation. It has made it all a lot more stable. There is a limit to the amount of particles and a balance between the attempts to get a clear position for the next coords for each circle, but I am pretty happy with the result and randomness. 

     

    I would be interested to see how someone else with canvas / GSAP know-how would approach something similar so that I could maybe learn how to improve in areas of my approach.

     

    Thanks

     

    See the Pen ExbZpKo by marklawrencedesign (@marklawrencedesign) on CodePen

    HTML CANVAS - Animating and Array of values

    in GSAP

    Posted

    Thanks OSUblake

     

    ...yes I am seeing that actually. Below is another revised version where I have managed to reuse my function which I was happy with. As you say though, when the code cannot find a suitable x/y position and 'breaks' out I get a console error as I dont have a matching oldX / newX cord for my animation part further down the road.... the example works to a fashion regardless of this error but when I crank up to say 1000 circles it just breaks down :)

     

    Never mind, I was trying to run with an idea I had but I think it has met its natural conclusion...unless anyone can build upon what I have here of course!

     

    Thanks guys

     

    See the Pen XWzpaqv by marklawrencedesign (@marklawrencedesign) on CodePen

    • Like 1

    HTML CANVAS - Animating and Array of values

    in GSAP

    Posted

    Thanks elegantseagulls. I have taken your advice and worked that into the codepen link here. I have the circles animating now. I am missing the logic that I had in my init() function that checks if the circles will overlap here at the moment though. I can most probably get that to work here again, but just feel I am replicating a lot of the code from that init function here again, dont you think? I was hoping to be a bit more clever by reusing the init function like in my first attempt...but I think I am reaching my understanding of JS in general tbh.

     

    See the Pen dyZNWLj by marklawrencedesign (@marklawrencedesign) on CodePen

     

    Thanks for your input.

    HTML CANVAS - Animating and Array of values

    in GSAP

    Posted

    Hi,

     

    I was hoping someone would be able to help me with the above.

     

    I have been trying to figure this one out for quite some time and have hit a wall.

     

    I basically have created a function that loops and draws circles to a canvas element that does not allow them to overlap (init() func. in my code). What I would like to do is run that function again, grab new x and y cords and have GSAP animate the circles to these fresh cords (move() func. in my code).

     

    Instead of the animation happening the circles simply flash between state 1 & state 2...I have tried all manner of things to get this to work but realise I am missing something fundamental in my understanding of how GSAP plays with canvas here.

     

    Any help would be greatly appreciated.

    Thanks

     

     

    See the Pen OJOWPRj by marklawrencedesign (@marklawrencedesign) on CodePen

    Animating Dynamic Loaded Content - Animation slows down after each 'round'

    in GSAP

    Posted

    Hi all,

     

    I was wondering if you could help me out - here is my codePen:

     

     

    This pen simulates the real-life issue I am having using Ajax, except for demo purposes I am using '.append()'

     

    I have been as descriptive as possible in the pen to articulate the specific issue, but I will explain again here:

     

    1. I need to animate an ajax-loaded article on button click 'open'
    2. I realise that the loaded content will not be seen by the TL if I declare my variables pointing to these elements on page-load, therefore I am tying the 'master.add(...)' when the button is clicked / ajax content is available in the DOM.
    3. The pen works, the loaded content is indeed added to the page, and it animates as expected ONLY on the first play / close.

     

    If you click play, and then close a few times in the pen you will notice the animations still plays, but there is a progressively longer gap between each stage of the animations.

     

    Is it because on each 'open' click I am again adding to the master, and it is getting 'clogged' up? If so what should I do to clear the 'master.add(...)'?

     

    I have done a LOT of googling :) but I cannot find an answer, and I think I have gone in a big circle of pain. 

     

    ...awesome product btw (when I can make it play ball ;))

     

    Thanks in advance if you can help.

     

    Also - is there a better // more practical method to my code setup for this in general? It would be awesome for a GSAP Jedi to offer me advice - Im always looking for ways to improve how I approach things.

     

     

     

     

    See the Pen KNgdxL by marklawrencedesign (@marklawrencedesign) on CodePen

    Hover animation - fast 'rollIn' causes ani to get stuck

    in GSAP

    Posted

    Hi guys,

     

    I was wondering if you could help me with this.

     

    A brief overview of what I am trying to achieve:

     

    • When user hovers over '.item', I want the tag in the corner to do a bounce animation.

    • I do not require this animation to reverse on rollout

    • There are more than one '.item' instances on the page (blog posts) so need to be able to detect the specific instance which it actually hovered on.

     

    The problem I am experiencing is if a user hovers in/out very fast - the animation gets stuck. 

     

    From reading the forums I have tried a few different approaches to this, but cannot seem to figure out how to solve this.

     

    - I am also planning on adding more animations on the hover state as well, so ideally need all of these to fire on the '.item''s hover.

     

     

    Here is V1 of what I have tried - hover in and out fast and you will see the ani freeze-up

     

    Here is V2 of what I have tried using a master timeline, failing miserably

    See the Pen yaPamY by marklawrencedesign (@marklawrencedesign) on CodePen

     

     

    Thanks guys,

     

    See the Pen ALbLPE by marklawrencedesign (@marklawrencedesign) on CodePen

    Reverse morphSVG, master timeline

    in GSAP

    Posted

    alas, indeed gsap is doing what I needed it to, however all of my other code was breaking it!.

     

    For anyone who wants to see a working  demo of this I have made a pen

    See the Pen AXmjYw by marklawrencedesign (@marklawrencedesign) on CodePen

     

    Thanks PointC - I am 99.99% sure Ill be back in the forums with another question - in future a pen will be the way to illustrate my question more!

     

    Cheers,

    M

    • Like 2

    Reverse morphSVG, master timeline

    in GSAP

    Posted

    Hi all,

     

    I am trying to reverse a timeline that contains a morphSVG transition, but it does not seem to want to return to the 'data-original' coordinates.

     

    Here is my code:

    var master = new TimelineMax({
		paused: true
	});

	master.add( swipe() );

	//my Animation, morph from one svg to another
	function swipe() {
		var tl = new TimelineMax();
		tl.set(bgSvgStart, {fill: "rgba(33, 32, 32, 0)"})
			.to(bgSvgStart, 0.6, {morphSVG:bgSvgEnd, fill: "rgba(33, 32, 32, 1)", ease: Power2.easeIn});
		return tl;
	}

	if(openingAni == true) {
		//play animation
		master.play();
	} else {
		//play animation in reverse, Not working
		master.reverse();
	}

    I have tried a few variants of the above code, but cannot seem to get anything working on the reverse.

     

    Thanks,

     

     

    Master timeline concept - adding delays to when each animation is called

    in GSAP

    Posted

    Hi all,
     
    I was hoping you could solve this problem I am having, I have read through the forums but cannot seem to find an answer / logical solve to the following:
     
    I have a series of functions that each have a part of an overall animation. I am using a master timeline to add each of these two, so that they fire in series.
     
    I want to add a delay between when one finishes and the next starts, here is a simplified example of what I need:
     
    master.add( showImage())
   //I would like to set a delay here until 'fadeImage' starts
   .add( fadeImage(), "showText")
   .add( showText(), "showText") 


function showImage() {
   var tl = new TimelineMax();
   tl.set(bgImage, {opacity: 0, scale: 1.2});
   tl.to(bgImage, 2, {opacity: 1, ease: Sine.easeOut}, "sweepIn");
   tl.to(bgImage, 1, {scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

function fadeImage() {
   var tl = new TimelineMax();
   tl.to(bgImage, 2, {opacity: 0.1, ease: Sine.easeOut});
   return tl;
}

function showText() {
   var tl = new TimelineMax();
   tl.set(title, {opacity: 0, scale: 1.5});
   tl.set(subHead, {opacity: 0, scale: 1.5});
   tl.to(title, 2, {opacity: 1, scale:1, ease: Sine.easeOut}, "sweepIn");
   tl.to(subHead, 1, {opacity: 1, scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

    Thanks,

     

    changing transform origin

    in GSAP

    Posted

    Hi team,

     

    Firstly I just want to say what an awesome product this is - I love it.

     

    I was wondering if you could help me out with a problem I am having:

     

    I need to change the transform origin of a div I am animating, however when I run the animation, the final value I apply for it is applied immediately - take a look at my code:

    	var master = new TimelineMax();

	master.add( sweepIn() )
	      .add( sweepOut() )



	function sweepIn() {
		var tl = new TimelineMax();

		tl.set(sweepAway, {transformOrigin:'left center'});
		tl.set([sweepColour,sweepPlain], {scaleX: 0});
		tl.to(sweepColour, 2, {scaleX: 1, ease: Sine.easeOut});
		tl.to(sweepPlain, 1, {scaleX: 1, ease: Sine.easeOut},"-=1");

		return tl;
	}

	function sweepOut() {
		var tl = new TimelineMax();
		tl.set(sweepAway, {transformOrigin:'right center'});
		tl.to(sweepColour, 2, {scaleX: 0, ease: Sine.easeOut});
		tl.to(sweepPlain, 1, {scaleX: 0, ease: Sine.easeOut},"-=1");

		return tl;
	}

    When the animation runs, it adds "transformOrigin:'right center'" from the beginning, when I need "transformOrigin:'left center'" to be applied first, and then change to 'right center'

     

    If this is not clear I can setup a codePen.

     

    Thanks,

    Mark

     

     

×
×
  • Create New...