Visual-Q

Hey Guys, Thank you for taking the time to respond, I can always count on this forum for help, quality peeps here. With respect to my goals as PointC mentioned - mainly design oriented for websites, I've been a designer for a number of years and more and more of my work is now shifting from print to websites. After doing on and off development for about a decade I've started putting a strong focus on getting my developing skills up to par. My experience with javascript is much like Point Cs fits and starts, learn a little, forget alot, a little bit sticks and I make incremental progress. I think I've finally gotten to the point where I'm starting grasp javascript so hopefully I can structure my learning some moving forward. Frameworks are great and GSAP simply awesome, and you can you use them fairly effectively without knowing what's going on under the hood, but it's clear that to really harness their full potential you have to be solid in javacript. Not a guru necessarily, but at least competent. I will check out the suggestions, thanks again for the advice.

This isn't a GSAP question so apologies if anyone is annoyed by it, but this forum is so helpful and knowdgeable that I thought I'd put it out there. Can any one suggest some good learning resources online to help take my javascript skills to the next level. I've done the usual basic training w3c, code academy etc... so where do I go from here? I would expect there may be a lot of people that might benefit from some good advice along these lines.

Thanks Jack!!! Worked like a charm . Just added: jQuery( window ).resize(function() { newProd_tween.progress(1).invalidate(); }); And seems to work perfectly.

Thanks Jack, I was looking at invalidate but couldn't get it working. Just to confirm I'm applying it correctly is the following how I would add it, or does it need to be attached to a callback. var newProd_tween = new TimelineMax(); newProd_tween.fromTo('#new-product-container', .5, {height: '20vh', ease: Linear.easeNone}, {height: 100/7 +'vw', paddingLeft: '2%', paddingRight:"2%", ease: Linear.easeNone}); newProd_tween.invalidate(); I'm not actually looking to restart the playhead progress manually as that's under control of the scroll magic trigger. I just want to clear the cached start values so when the animation is reversed it is forced to recalculate from the end values back to start values if this is possible. If invalidate is applied correctly in the above code I'll play around with it and figure out why it's not working. I may have to delve deeper into what Scrollmagic is doing here. I'm presuming that scroll magic just plays the animation forward when triggered then reverses the playhead when the trigger is crossed in reverse but maybe there is more happening here. One other thing that occurs to me is maybe this can't be done in one fromTo tween? i.e. reverse calculating the fromTo values Do I perhaps have to have one tween to the end values and a new tween back to the initial values to achieve this?

I am trying to figure out best practices for dealing with flushing cached values. For example in the animation below which is activated by a scroll magic trigger I have an object animate from a height value based on screen height ( using vh units) to a height based on screen width, in this case I've used viewport width units to get my value. When the animation runs it converts the initial value (vh) to vw for animation (which is brilliant), and caches the value so that if the screen width changes the cached start value is then incorrect when scroll magic reverses the animation. What's the best way to get a tween or timeline to discard cached values and recalculate whenever it runs or reverses. I know that in individual usage cases different techniques may be more efficient but is there a general sledgehammer technique I can use to just flush cached values and force recalculation that doesn't involve clearing props that are currently applied. var newProd_tween = new TimelineMax(); newProd_tween.fromTo('#new-product-container', .5, {height: '20vh', ease: Linear.easeNone}, {height: 100/7 +'vw', paddingLeft: '2%', paddingRight:"2%", ease: Linear.easeNone}); // init ScrollMagic Controller var controller = new ScrollMagic.Controller(); // New Product Scene var newProd_scene = new ScrollMagic.Scene({ triggerElement: '#new-product-trigger' }) .setTween(newProd_tween); controller.addScene([ newProd_scene, ]); }

Hugely helpful Blake as always. Especially the way you pushed the appended instances to an array for tweening. Really opened my eyes for thinking about how to get control over things, demonstrations of these kind of techniques are invaluable. Thanks.

Thanks PointC. I guess I should examine the docs first on things like this but the intro for 1.19.0 download at the bottom just takes you direct to the TweenMax build so I assumed it was included in the Max build.

Hey guys, Is the modifiers plugin included in the GSAP 1.19.0 TweenMax full build "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js" or does it have to be loaded separately. I'm getting an error on the modifiers property "invalid modifiers tween value: [object Object]", it works fine with the beta build and plugin beta as seen here. http://codepen.io/Visual-Q/pen/grzpZP When I replace the js with 1.19.0 and remove the plugin request everything works except the modifiers. Or maybe there has been a syntax change for the final that I'm not picking up on?

Thanks Blake. Couldn't have done it without your pens. Seems every time I go down the rabbit hole of trying to figure out something new it leads me to one of your pens. Quite extraordinary the contribution you've made to this forum.

More like a lens flare http://codepen.io/Visual-Q/pen/grzpZP

Created what I thought was an interesting effect that could be used for lens flares or bokeh lights. http://codepen.io/Visual-Q/pen/WxJNVm Based on Blake's Lissajous curves. http://codepen.io/osublake/pen/zBprPo?editors=0010

Answered a question I had before I even had a chance to ask it. Thanks Jack!

I swear you must be reading my mind Blake, I was trying to wrap to wrap my head around how to accomplish both of the techniques you demonstrated recently - the particle trail and the Lissajous curves - then when I saw your pens I thinking a bout how to combine them and you did that too! I think what interests me most about this plugin is the possibility for building pluggable functions that test for dom conditions and change tween behaviour accordingly. This can do a lot of interesting things for menus and other ui behaviour. It's been noted that a lot of this could be done with the update handler, maybe so, but this plugin makes it so much easier, or at least it makes it easier for me.

I think Blake has demonstrated that there is little doubt as to the potential value of this plugin. It very much seems like a logical next step in the platforms evolution.

Wow. As you noted that proposal opens up a lot of possibilities,. It think it should definitely become part of the core. Thanks for the help!

If I can add my humble opinion as a Newb, while it will take me a bit of time to wrap my head around how to put this to work, adding this kind of granular and dynamic control over vars values inside a tween would be fantastic. Maybe many people might not take advantage of it, but for the ones who do I think it would add tremendous value to the GSAP package.

Hey Guys, I was wondering if it is possible without writing an external function to pass a vars value to a tween with a contstraint. In my case I am adding a relative scale value {scaleX:"-=0.3"} to a group of objects. Some of these objects begin with a scale of 0 as they start in a collapsed state and later expand. As such adding the value above would give these objects a value of -0.3 flipping the X axis and making them visible. Is there any way to attach a constraint to the tweens value i.e. {scaleX:"-=0.3",constrain to minimum value of 0}. I can target the objects separately if need be easily enough, but I wanted to check if setting a constraint is possible in this way.

I suppose it's rather presumptuous for me to be making a suggestion like this since I've only been a forum member for a short time, however... Has compiling a knowledge base of solutions from forum content ever been discussed. I'm not suggesting folding every question and solution into it, many are highly complex and very specific in nature, just ones that cover basic techniques and best practices, maybe ones that also cover known browser issues and problems as well. A good example of an appropriate item would be the answers to the recent post:Can you use GSAP's timeline to execute function @ certain time?

Awesome, thanks guys. Exactly what I was looking for.

I was wondering if the javascript gurus could advise me. I mada a callback function attached to a Timeline to remove an animation element from the dom on completion like so: var titleTextAnimation = new TimelineMax( {onComplete:removeElement(animationContainer)}); function removeElement(elementToRomove){ elementToRomove.remove(); console.log('animationcomplete'); } Then I discover that passing the parameter in parentheses invokes the function immediately without waiting for the callback. How could I do this better? It would be nice if I could pass the parameter in this way. I'm not sure how I might use a 'this' instead inside the function since I don't even know what it would refer to in a onComplete callback(the timeline itself maybe?).

Thank you Carl!! I followed your advice stripped out the tweens till I isolated the problem. Huge DUH!! on my part I was missing a decimal - I had 125 instead .125 as a time offset on one of the tweens. Pretty dramatic difference. The animation it was attached to was very subtle so I wasn't noticing the problem. Only a couple of days in with Gsap but this platforms already blowing my mind. Need to keep a closer watch on my code though. Thanks again.

Hi Guys, I'm setting up a progress bar slider to assist with animation testing and I'm having difficulties - specifically the progress() call back appears to be reporting strange values. The animation appears to be fine so far and progress bar works except that the values the progress callback reports the animation as staring at .93xxxxx instead of 0. So i set the value of the slider to 94 to align it and got it working, if I have the range run from 0-100 the animation runs in the last five percent of the slider. Does the progress callback not automatically calculate the length of the animation and start it's data reporting at 0? Am I not understanding it properly? I posted my code below, I stripped out the animation properties to make it easier to read but left in all the timing values and basic construction. The slider code is at the bottom, I based it on the gsap code pen that contains one. Note also if I change the duration of the animation, the callback changes the start value of the data it reports. Have I set up my timeline wrong or am i not using the callback correctly. Any help is much appreciated. window.onload = function(){ //VARIABLES FOR TWEENS var titleAnimation = $('.animation1 div div'), zAnimation = $('.z-anim'), cAnimation = $('.c-anim'), aAnimation = $('.a-anim'), xAnimation = $('.zerox'), xAnimationcon = $('.zeroxcon'), xAnimationcon = $('.zeroxcon'), wordSpace = $('.wrdspc'), wordSpacecon = $('.wrdspccon'), hideDot = $('.killdotoff'), forceDot = $('.killdotoff'), forceScale = $('.force-scale'); //TWEEN MAX var titleTextAnimation = new TimelineMax(); //SET SOME VALUES TweenMax.set(xAnimationcon, {width: "auto",transform:"scaleX(1)"}); TweenMax.set(xAnimationcon, {width: "auto",transform:"scaleX(1)"}); TweenMax.set(forceScale, {transform:"scaleX(.9999)"}); //ANIMATION titleTextAnimation .staggerTo(titleAnimation, 1.25, {}, 0.10) .to (zAnimation, 0.35, {animation proerties}) .to (cAnimation, 0.2, {},"-=0.425") .to (aAnimation, 0.15, {},"-=0.3") .to (zAnimation, 0.175, {},"+=.5") .to (cAnimation, 0.10, {},"-=0.175") .to (aAnimation, 0.08, {},"-=0.17") .to (zAnimation, 0.175, {},"+=.5") .to (hideDot, 0.175, {},"-=.125") .to (cAnimation, 0.175, {},"-=125") .to (aAnimation, 0.175, {},"-=.125") .staggerTo (xAnimation, 0.05, {}, .05, "stagger") .staggerFrom (xAnimationcon, 0.05, {}, .05, "stagger") .to (hideDot, 1, {},"stagger") .to (wordSpace, 0.05, {},"stagger") .to (wordSpacecon, 0.05, {},"stagger"); //SLIDER FUNCTIONS titleTextAnimation.eventCallback("onUpdate", updateSlider); $("#slider").slider({ range: false, min: 94, max: 100, step:.01, slide: function ( event, ui ) { titleTextAnimation.pause(); //adjust the timeline's progress() based on slider value titleTextAnimation.progress( ui.value/100 ); } }); function updateSlider() { $("#slider").slider("value", titleTextAnimation.progress() *100); console.log(titleTextAnimation.progress()); } };

Here's an example of a function for running animation on FullPage section load. Note this is only the function you need to call the function inside the callback. jQuery.animateOnSectionLoad = function (){ var activeSection = $('.section.active'); $( ".animation-element",activeSection).each(function(){ var animationTarget = $(this); //run your gsap animation on animationTarget variable // assumes of course you have class animation-element on tag being animated }); }; Appended post to show callback with FullPage initialization $(document).ready(function() { $('#fullpage').fullpage({ //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){ // function inserted in callback $.animateOnSectionLoad();}, afterRender: function(){}, afterResize: function(}{}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} }); }); Notice there are also many other callback options for Full Page. Would be a good idea to reference FullPage in title of this post so people know that is what it's in reference to.

Scroll magic is great... it's a different animal from full page though. For simple slide to slide moves full page works great and is very easy to use. Of course the complexity ramps up considerably if you want to use callbacks for firing animation. Depends on what you are trying to achieve.

Of course it does, why do you think I suggested it. I use it to fire Jquery animations, right now I'm transitioning some of those animations to GSAP. Refer to the documentation: https://github.com/alvarotrigo/fullPage.js#fullpagejs It's under the section called Callbacks.