Jump to content
Search Community

bromel

Members

  • Posts

    71

  • Joined

  • Last visited

 Content Type 

Posts posted by bromel

    applying cLassName property to hypen separated class

    in GSAP

    Posted

    Hello all

     

    Just something I noticed

     

    In gsap I can change tween or change a class by simply doing

    TweenMax.to(myClass,.3,{className:"yourClass"});

    so we can tween myClass to yourClass, but I get a console error if the classname has a '-' in it for example

    TweenMax.to(myClass-hypen,.3,{className:"yourClass"});

    The following console msg proceeds:

    Uncaught TypeError: t.split is not a functionse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:16ye.parser @ TweenMax.min.js:16l._onInitTween @ TweenMax.min.js:16n._initProps @ TweenMax.min.js:16n._init @ TweenMax.min.js:16n.render @ TweenMax.min.js:17l.render @ TweenMax.min.js:14n.render @ TweenMax.min.js:16O._updateRoot.D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16g @ TweenMax.min.js:16

    So I am assuming that the Classname property does not like changing hyphenated classes although the '+=' and '-=' atributes work as expected.

     

    Any thoughts?

     

    bromel

    Extremely Strange Choppiness

    in GSAP

    Posted

    Hello m4g1c14n

     

    I have just had a quick look at your pen, this is just a quick suggestion but mainly I would ask if the button map class is setup relative in your css as the other tweenable classes in this section.

     

    Here is my code suggestion

    //Strange choppiness started here!
	tl.staggerFrom ( $(container_menu).children() , 0.25, {y:"50px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" );
	tl.from(button_map, 0.5, {y:"25px", opacity:0, ease:Back.easeIn}, "-=0.25");
	tl.staggerFrom ( $(container_social).children() , 0.25, {y:"100px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" );
	tl.from(button_like, 0.5, {x:"100px", autoAlpha:0, ease:Back.easeOut}, "-=0.25");
	tl.from(address_title, 0.5, {y:"-25px", autoAlpha:0, ease:Back.easeOut}, "-=0.25");

    This is a usefully article which might be of use to you

     

    http://greensock.com/forums/topic/6176-starting-opacity-when-autoalpha-fading-from-0-to-1/

     

    Just double check your css, I believe you will find the issue lies there.

     

    regards

     

    bromel

    continuous moving loader

    in GSAP

    Posted

    Good evening All,

     

    I am just trying to create a loader screen,

     

     

    The issue that I having is that I am also wanting to move along the progress bars along the stage to create a infinite loop like the code pen below.

     

    See the Pen rVgEqm by w9914420 (@w9914420) on CodePen

     

    Any help or pointers into achieving this effect will be most welcome.

     

     

    regards

     

    bromel

    See the Pen doExzE by w9914420 (@w9914420) on CodePen

    Referencing a tween correctly

    in GSAP

    Posted

    Good evening all,

     

    Many thanks for taking a look at this for me, especially when you guys are extremely busy.

     

    I have updated the code and added a new pen which can be found here.

     

    See the Pen gbNwRd by w9914420 (@w9914420) on CodePen

     

    I have managed to get it working with the logic that I need to be functional. its not the most elegant code but it will do the job, although I question if it could be written better.

     

    what is important to note is that if the user clicks either of the main buttons (denied, cancel, allowed) whilst the start tween is onscreen or completed then i want my other tweens to do their job.

     

    If on start any of these buttons are pressed, then the user will only see a special-tween for the denied function.

     

    The final goal will to be disable the buttons after the first choice has been made, so as not to confuse the user.

     

     @OSUblake many thanks for the code, i like how you written it, I did not know u could feed vars, with assigned tweens in such a fashion.

     

    Please feel free to comment, im not a coder just someone who likes GSAP ;)

     

    regards

     

    bromel

    Referencing a tween correctly

    in GSAP

    Posted

    Hello Carl,

     

    Many thanks for this, i must have been playing around with the pen after I had submitted it. Im just going have a look into this further and get back to you on this.

     

    many thanks

     

    bromel

    Referencing a tween correctly

    in GSAP

    Posted

    Hello everyone,

     

    It always seems to be the case u get the answer after a long walk in the park ;)

     

    it looks like i did not reference my tween correctly:

     // this does not work(we mention the tween but don't reference it)

 if (status == 'denied') {
    
   myNorm.restart();
    
    console.log('should have restarted the tween?');
    
    
}



// lets reference it 

if (status == 'denied') {
    
   this.myNorm.restart();
    
    console.log('should have restarted the tween?');
    
    
}

    this seems to have the affect, but I wonder what your thoughts are on this?

     

    again too much tnxs guys

     

    regards

     

    bromel

    Referencing a tween correctly

    in GSAP

    Posted

    Good Afternoon,

     

    I am trying to be able to control a tween within a function that i have created.

     

    I am not sure weather what I am doing is possible within the scope or whether I am using the correct call back function

     

    My goal is to simply to reverse the direction of a tween when the call back is made, but I am unable to make reference to it within my function. 

     

     

    Any Help would be most appreciated.

     

    regards

     

    Bromel

    See the Pen ZYNgXW by w9914420 (@w9914420) on CodePen

    scrolling an object using buttons (onPress)

    in GSAP

    Posted · Edited by bromel

    Good evening All
     
    I have created a modal info box for which I had added the Draggable and scrollTo plugin for some added functionality. I am trying to do 2 things.
    1. At the moment when you press either the 'up or down' button you get an incremental tween.
    2. I am wanting to control the scroll by making it so that when either button is pressed and held down the scroll will smoothly move in the direction that you have pressed.
     
    I am not sure if this more a JS question since it would depend on the function used to make the call. I did come across this fiddle on my travels which works to an extent.

    var timeout, clicker = $('#clicker');

clicker.mousedown(function(){
    timeout = setInterval(function(){
        // Do something continuously 
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

    I am wonder what would be the best way to approach this. Any ideas or suggestions most welcome.

     

    regards

     

    bromel

    See the Pen azzrZa by w9914420 (@w9914420) on CodePen

    Continuing a loop on a tween

    in GSAP

    Posted

    Hi Maelfyn

     

    You hit the nail on the head, this is exactly what I was trying to achieve opinions are always welcome ;). Im not too familiar with JS but I understand what you have done and now I have something to study. My immediate thought is that by your method, I could easily create libraries of tweens for one element. Thank you very much for your help.

     

    regards

     

    bromel

    Continuing a loop on a tween

    in GSAP

    Posted

    Good evening all,

     

    I have been experimenting with GSAP (which is awesome!!) and I am trying to create a loading animation for which can be viewed here: 

     

    The effect does work, but I am wanting to keep the spinner, spinning clock-wise on 'loadout' (when the button is pressed). due to the method for which I have the animation working I was wondering if I could still have the animation in reverse but keep the rotation property going in the direction that I want it.

     

    initially I had in mind the use of:

     

    tlspin.kill({rotation:true})

     

    in an effort to rebuild the animation again, but this did not work, out of interest is there a way to reinstate a tweens property once it has been killed? or is there another way of creating the same effect.

     

    many thanks

     

    Bromel

    See the Pen pvvPyW by w9914420 (@w9914420) on CodePen

    Tweening from one class to another (Timelinelite)

    in GSAP

    Posted

    Hello Jamie,
     
    I much appreciate your answer on this and understand what you mean so in essence the full code looks like this:

    $("<div class='fly'>foo</div>").prependTo("body");

var tl = new TimelineLite();


var fly = $('.fly');
tl.to(fly, 3, {className:"flyaway", right:"632px"})
  .to(fly, 2, {className:"flybye"}, 1)
  .to(fly, 2, {className:"dead"}); 

    What I wanted to ask since I am completely new to Javascript/jquery/GSAP is more of how the cache object is being referenced when it is being applied. From a non-technical perspective it seems as if it will inherit the next class and hold that as 'fly' and then apply the next class and cache that has 'fly' also. This is just an assumption but is this more or less to what is actually happening with the object?

     

    bromel

2
3
Page 3 of 3  
×
×
  • Create New...