Jump to content
Search Community

DeeDubs

Members

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by DeeDubs

    Accessing timelines that are held within functions

    in GSAP

    Posted

    Hi There, I have been building banners for a while using GSAP for my animation (great tool BTW) and I have always structured the animations along the follow way:

     

    function frame1build(){
 var tl = new TimelineMax();
 tl.from('#item', 0.7, {animate properties}); 
 return tl;
}

function frame2build(){var tl = new TimelineMax();
 tl.from('#anotherItem', 0.7, {animate properties}); 
 return tl;
}

function startAd(){ 
 var tl = new TimelineMax({paused: true}); 
 tl.add(frame1build())
 .add(frame2build()); 
}

     

    and so on...startAd() is called on the ad loading.

     

    this has always worked great as i can separate my frame animations into separate functions, adjust the timings in the main startAd function timeline so they overlap etc

     

    what has always stumped me is how I can cross call or reference these. Or for example if i wanted to add a timeline that had a looped animation I can add it like below: 

     
    function loopedAnimation(){
 var tl = new TimelineMax({repeat: -1, repeatDelay: 1});
 tl.to('#loopItem', 0.2, {left: '+=10', opacity: 0, ease: Power2.easeIn}, 0.2);
 return tl;
}


function frame1build(){
 var tl = new TimelineMax();
 tl.from('#anotherItem', 0.7, {animate properties})
 .add(loopedAnimation); 
 return tl;
}

    and this works fine too... what I cant work out is how I can access the timeline within loopedAnimation to stop it or pause it etc from within a different function tl (ie in frame2build I want to stop the looping)

     

    I tried things like .remove(loopedAnimation) but it just stops the whole thing working, similarly cant work out how to access play or pause ?

     

    How do I got about accessing/controlling them?

     

    Thanks

     

    Dave

     

    GSAP, ScrollMagic & WordPress

    in GSAP

    Posted

    I finally worked it out, thanks for the pointers guys... as I was starting to suspect, it was just me being a f$%$ing idiot.

     

    FYI

     

    as I have .addIndicators in my ScrollMagic scene I needed to make sure I was also calling the ScrollMagic Debug JS file... as that was missing it was spannering everything else!

     

    Thanks again and sorry for wasting any time

    • Like 2

    GSAP, ScrollMagic & WordPress

    in GSAP

    Posted

    Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies.

     

    I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far.

     

    I am enqueue the scripts in my functions file like:

    function my_theme_scripts_function() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true );
wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true );
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true);
}

add_action('wp_enqueue_scripts','my_theme_scripts_function');

    then just for testing have tried using the below in my scripts file:

    var controller = new ScrollMagic.Controller();
var myTest = new ScrollMagic.Scene({duration: 200})
.triggerElement('#hero1')
.setTween(testTween)
.addIndicators()
.addTo(controller);

    but I keep getting the same error:

    scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function

    any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference.

    Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible)

    Cheers

    D

    Safari Button Hit Area bug using rotationY, rotationX

    in GSAP

    Posted

    Hi, I've come across a bug (So far only in Safari on Mac) and Im assuming it is with bug safari rather that GSAP but I'm wondering if there is a hack I can use to fix it.

     

    I've used the brilliant tilting script from ihatetomatoes and added some buttons within, but when you rollover the buttons you will notice that some have a very restricted hit area (hover state and click only works when you are rolling over in the middle of the top two buttons, not the full width.

     

    Anyone seen this before?

     

    D

    See the Pen vLYbYN by anon (@anon) on CodePen

    controling elements in sync with rotational position of different element

    in GSAP

    Posted

    Wondering if someone can help shed some light on something I am trying to do with GSAP which I just suspect I am going the wrong way about solving.
     
    Essentially there is a dial that spins for a random amount of 360° rotations and it finally settles on one of 10 segments (each 36° in size). What I am hoping to achieve is the segments to animate as the dial goes past them each time (so in sync with the speed of dial). 
     
    I have very crudely recreated in CodePen, the 3 issues i think I have are:
     
    • I can't get the value returned from updateProps to always be a 0-360° value - it gets higher and higher the more it spins?
     
    • if the dial spins really fast my current way of calling the function segmentGlow() sometimes misses out if the numbers are jumping up in big steps
     
    • i really want the segments to animate each time the dial passes, but I’m not sure if calling the timeline in the function again works
     
    I’m hoping I’m missing out on something and there is a much easier way of solving this….

     

    any pointers/help greatly appreciated

    See the Pen GoRJxO by anon (@anon) on CodePen

×
×
  • Create New...