Visual-Q

Members
  • Content count

    31
  • Joined

  • Last visited

Community Reputation

26 Newbie

About Visual-Q

  • Rank
    Advanced Member
  1. How to gracefully exit a repeating yoyo?

    Thanks to Carl for pointing me in the right direction. If anyone can benefit from it here's the final code, a pretty simple and straightforward way to connect a repeating yoyo to a jQuery hover method. var homeButton = $('button.home'); homeButton.each(function(){ $(this).hover(over, out); var buttonSVGElement = $(this).find('svg'), homeButtonAnimation = new TimelineMax({repeat:-1, onRepeat: pauseAnimation, paused:true}), play; homeButtonAnimation.to(buttonSVGElement, .5, {xPercent:50, repeat:1, yoyo:true, ease:Power1.easeInOut}); function over(){ homeButtonAnimation.resume(); play = true; } function out(){ play = false; } function pauseAnimation() { if(play === false){ homeButtonAnimation.pause(); } } });
  2. How to gracefully exit a repeating yoyo?

    Awesome, thanks Carl, I'm always amazed at how responsive you guys are. I have a followup question, i was trying something similar with the onRepeat directly on the tween with the yoyo and it seemed to work if the yoyo was returning to start but would stick at the midpoint if the yoyo was in it's initial yo if that makes sense. Does this mean that a yoyo effect is broadcasting two onRepeat events, one on the way out and one on the way back. Given the way it's wrapped in a timeline I can see why it works in the codepen example if that is the case.
  3. Hey Guys, I was wondering if there is a better way to do this. I have an arrow svg element that when hovered over bounces left and right in repeating yoyo. The only way I could think of to exit it was to pause the animation and then set a new tween telling it to go back to its start position. This works fine but I was wondering is there a more sophisticated way to accomplish this, i.e. is it possible to intercept the first tween and tell it to finish it's current iteration and then stop? homeButton.each(function(){ $(this).hover(over, out); var buttonSVGElemtent = $(this).find('svg'); var homeButtonAnimation; function over(){ homeButtonAnimation = TweenMax.to(buttonSVGElemtent, .5, {xPercent:50, repeat:-1, yoyo:true, ease:Power1.easeInOut}); } function out(){ homeButtonAnimation.pause(); homeButtonAnimation = TweenMax.to(buttonSVGElemtent, .5, {xPercent:0, ease:Power3.easeOut}); homeButtonAnimation.play(); } });
  4. Javascript intermediate and advanced learning?

    Thanks Blake, I know you're right, if I want to be good at it I'll have to understand the core concept of objects and how to approach OOP. This is definitely the hump I need to get over. And that's very much my goal in starting this thread to find some advice on how to structure my learning moving forward to learn how to do it right, rather than just memorizing the syntax for this method and that method without really knowing what it going on.
  5. Javascript intermediate and advanced learning?

    Thanks Johan, I watched with my morning coffee and I got an insight how to solve a bottleneck I couldn't figure out. I'm going to start watching more things like this.
  6. Javascript intermediate and advanced learning?

    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.
  7. 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.
  8. How to clear cached prop values and recalculate?

    Thanks Jack!!! Worked like a charm . Just added: jQuery( window ).resize(function() { newProd_tween.progress(1).invalidate(); }); And seems to work perfectly.
  9. How to clear cached prop values and recalculate?

    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?
  10. 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, ]); }
  11. function-based values question

    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.
  12. Error on modifiers?

    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.
  13. Error on modifiers?

    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?
  14. bokeh lights - lens flare

    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.
  15. bokeh lights - lens flare

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