Jump to content
Search Community

jamiejefferson last won the day on January 11 2015

jamiejefferson had the most liked content!

jamiejefferson

Business

  • Posts

    903

  • Joined

  • Last visited

  • Days Won

    134

 Content Type 

Everything posted by jamiejefferson

2
3
4
...
37
Page 3 of 37  
  1. jamiejefferson
    Thanks for the demo, but I'm still a bit unsure of what is the intended behaviour here. Your Codepen is quite a bit different to what I expected from the original question. There aren't any sprites and it's using three different properties instead of the one I expected for a sprite (backgroundPosition). Which of these (or something different?) matches the behaviour you're after? animation1 is tweening x between 0 and 550 animation2 button is pressed when x is at 275 animation1 stops animation2 starts and x remains at 275 animation1 is tweening x between 0 and 550 animation2 button is pressed when x is at 275 animation1 completes, bringing x back to 0 animation2 starts animation1 is tweening x between 0 and 550 animation2 button is pressed when progress is 50% (x is at 275) animation1 stops animation2 starts at 50% progress and x remains at 275 animation1 is tweening x between 0 and 550 animation2 button is pressed when progress is 50% (x is at 275) animation1 completes, bringing x back to 0 animation2 starts at 50% progress
  2. jamiejefferson
    It's quite difficult to understand the situation you're trying to describe there. Please consider providing a reduced demo in Codepen that demonstrates the issue.
  3. jamiejefferson
    Michael was right - if you don't include the SVG as an element in the DOM, the nodes inside the svg aren't added to the DOM and can't be accessed or modified. See http://codepen.io/jamiejefferson/pen/ogXrqx If you want to use the SVG as a background-image in CSS you won't be able to tween its children.
  4. jamiejefferson
    Looks like you're after the functionality of something like ScrollMagic. GSAP handles the tweens, and ScrollMagic triggers them at certain scroll positions. There's no built-in feature of GSAP to do this directly.
  5. jamiejefferson
    And you can separate multiple props with a comma TweenMax.set(someElement, {clearProps:"-webkit-transform,transform"});
  6. jamiejefferson
    I think this is just a misunderstanding of how clearProps functions. clearProps only clears the properties from the style attribute; it doesn't modify or delete anything from your stylesheets. i.e. <div id="foo" style="transform: rotate(50deg)"></div> TweenLite.set("#foo", { clearProps:"transform" }); <div id="foo" style=""></div> Any styles in your CSS will no longer be overridden by the style attribute so they'll be restored.
  7. jamiejefferson
    Yes in GSAP there is a force3D property you can add to a tween that tells the object to apply this tweak. It only needs to be added to an object once and GSAP will remember it for future tweens. TweenLite.to(foo, 1, { x:100, force3D:true });
  8. jamiejefferson
    It's a big big world and unfortunately they probably just haven't heard of/seen it yet. Tell your friends!
  9. jamiejefferson
    GSAP is able to tween any numeric property of any javascript object, but it has a CSSPlugin that makes modifying CSS styles a breeze. Originally, you would wrap any CSS properties in a css:{} object so that CSSPlugin knows to pick them up. The collision you're seeing is a small optimisation that automatically detects non-conflicting CSS styles to pass to CSSPlugin, saving you from having to use a CSS wrapper in every tween. // with the css object for CSSPlugin TweenLite.to(foo, 1, { css:{ rotation:360 } }); // rotation will be auto-detected as CSS if foo.rotation doesn't already exist TweenLite.to(foo, 1, { rotation:360 }); Essentially what you've asked for already exists and used to be the only way, but since the vast majority of users are after CSS tweens most of the time, it made sense for the wrapper to be made optional. Add the css:{} wrapper around rotation (and any other CSS properties) in your tween and it will avoid any collisions. Note: only properties intended for CSSPlugin go inside the wrapper - regular tween properites like onComplete, or direct properties of the target object should be outside the wrapper.
  10. jamiejefferson
    The onComplete property needs to be a function to callback, and tl.timeScale(1.6).reverse() returns a Timeline instance (in this case tl). You will need to add a function wrapper as Diaco suggested onComplete: function() { tl.timeScale(1.6).reverse() }
  11. jamiejefferson
    Hmm, how liberally is force3D applied e.g. if I call TweenLite.to(foo, 1, { color: "#F00" }); will foo have a transform applied to it?
  12. jamiejefferson
    You could rotate the paragraph in the reverse direction, but I think it would be easier to just correct the markup rather than trying to counteract the parent-child relationship e.g.. <div> <div class="colored-rectangle"></div> <p>My Content</p> </div>
  13. jamiejefferson
    Well, TweenMax definitely "recognises" the element and is applying all of the tweened styles (as evidenced by it working in Chrome and Firefox). There's a limitation in the other browsers that prevents transform styles from working unless they are added as attributes to the tag instead of as styles. There was a recent update to GSAP that detected this issue and used attributes instead, but it would appear to just be applying to inline SVG at the moment. (also Diaco's selection method was just missing a # for ID in the querySelector)
  14. jamiejefferson
    Yes I would recommend paper.remove() instead of clear() if you aren't going to be reusing the same paper, since it's leaving hundreds of SVG root nodes in the DOM. Here's a slight modification that sticks to just one Raphael paper http://codepen.io/jamiejefferson/pen/LEYdae Have you considered raphael's successor, snap.svg yet? Also GSAP is quite handy at tweening a lot of SVG properties without a plugin now http://css-tricks.com/svg-animation-on-css-transforms/
  15. jamiejefferson
    You create a new scope for your test variable when you use the keyword var. Changing the line var test = 'red'; to test = 'red'; makes it look down the scope chain to the original variable, and works as intended.
  16. jamiejefferson
    Yea I'm not sure if we're just not getting it but it still seems like Diaco's answers do exactly what you are asking for. You could also add callbacks at any time to a timeline with .add() or .call().
  17. jamiejefferson
    I tweaked it a bit here http://codepen.io/jamiejefferson/pen/azoKQv Things that changed: - Your image wasn't 960px wide, but 1278px - I nested mount2 inside mount 1 so you only need to tween 1 element - added a repeat to the timeline
  18. jamiejefferson
    I really have no idea what you're seeing as wrong here. Everything appears exactly as I would expect, and I can't see any sort of jumping/snapping/untransformed characters at all. I'm using Chrome on Win7, but even your example video looks ok to me (besides the lower framerate)...? EDIT: ok I finally understand what you're looking at now. It's really hard to notice in a lot of words but the L in HTML is definitely off. Still, it runs perfect in browsers for me and I'm not a mac guy so I don't have much to add. As a random thought, have you tried removing the 'Asap' webfont?
  19. jamiejefferson
    Yes you will need to either use another library like ScrollMagic (or create your own) if you would like GSAP tweens to be triggered at specific scroll positions. This isn't a built-in feature of GSAP.
  20. jamiejefferson
    // setTimeout() var timeout = TweenLite.delayedCall(2, function() { // do something once after 2 seconds }); // setInterval() var interval = new TimelineMax({ repeat: -1 }).call(function(param1, param2) { // do something every 2 seconds }, ["p1", "p2"], null, 2); // clearInterval() interval.kill();
  21. jamiejefferson
    Tweening globalTimeScale is quite easy, since it's just a getter/setter property of TweenMax which GSAP handles quite well TweenMax.fromTo(TweenMax, 2, { globalTimeScale: 0 }, { globalTimeScale: 1, ease: Linear.easeNone }); Be aware however that even this tween will be subject to globalTimeScale, so its duration/ease are going to be affected by this. http://codepen.io/jamiejefferson/pen/qcgBh?editors=001 Also, if you want to make a GSAP timer, there is a dedicated delayedCall() function just for that: TweenLite.delayedCall(1, myFunction, ["param1", 2]);
  22. jamiejefferson
    Glad you got it working. Just so you know: the TweenMax.js file includes all of TimelineMax, so using both files in your page isn't necessary.
  23. jamiejefferson
    Your first thought is probably right. Draggable does provide a hitTest method but I'm not sure that will be enough if you're using curved paths. You're probably going to need to research some collision detection algorithms.
  24. jamiejefferson
    Sorry if I misunderstood, but what's wrong with the approach in your codepen? Other than a line to add the attribute, it seems to do exactly what you say you want. In fact if anything, it seems like TweenMax's role in this codepen is unnecessary: http://codepen.io/jamiejefferson/pen/wzFBa If we had a better idea of how your carousel was running we might be able to provide a more interesting solution.
  25. jamiejefferson
    Since you're calculating absolute positions from the red box's start point, changing to absolute positions works in this case. Change: vars.x = '+=' + dx(target, destination);to vars.x = dx(target, destination); If you'd prefer to calculate the distance at the start of each tween then you need to delay any calls to dx() until the red box is in the right position. .call() would help here e.g. tl.call(moveX, ['#redBox', '#phO', 1], null, 0) .call(moveX, ['#redBox', '#phA', 1], null, 1) .call(moveX, ['#redBox', '#phB', 1], null, 2)
2
3
4
...
37
Page 3 of 37  
×
×
  • Create New...