Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. one approach would be to tween the progress() of the timeline instead of setting it like I did that for when you scroll down. Feel free to play with the values and add it to other conditions
  2. That may have been an oversight. its now un-unlisted. Thanks for bringing it to our attention.
  3. Hi and welcome to the GreenSock forums, Thanks so much for the demo. Very helpful. I don't want to confuse you too much but part of the reason things were weird is the way immediateRender works when a set() is the first thing in a timeline (at a time of 0). the short story is that you have multiple set()s and from() tweens trying to set and record values at the same time and the fact that the timeline is paused adds another level of complexity. Also I don't know if I understand it 100% so I risk confusing us both and there's also a chance this behavior may change in the next version of GSAP. An accurate description may come from @GreenSock However, the good news is that you can get the behavior you want by setting the autoAlpha of the h1 and h2 outside of the timeline. Take a look here: I messed with the css a bit just so that things are viewable above the fold.
  4. Great solutions, Shaun! Another twist on the progress bar is to put a tween inside the timeline the same duration as the timeline like:
  5. yes, you just need to add the layer name to the path (according to adobe: https://helpx.adobe.com/animate/using/timeline-layers.html#advanced-layers)
  6. Great! On first glance your code looked great, very well-structured. However we are in the process of diving deeper (into the engine, and your code) to find out where the problem is. We will definitely report back here when there are some results.
  7. I really don't think there is a solution that doesn't involve a fair amount of calculating the distances between objects in different coordinate spaces. I think the most straight-forward approach would be to re-parent the tasks inside the clock hand when you drop the task on the clock. Write javascript code that manipulates the DOM to look like: <div id="hour"> <div id="task1"></div> </div> Then when the #hour element rotates everything inside it goes with it. However, this means that you need to translate the task's x/y coordinates to where they would be inside the hour element. If you don't want to re-parent the tasks another approach could be to change the transform-origin of the task so that it sits perfectly on the center of the clock. Then if you rotate the task the same rotation of the hour they will line up perfectly. Again, this will involve measuring a bunch of stuff and moving things around. I suspect other folks may have some better ideas, but this isn't really something that can be easily solved by the GSAP API alone.
  8. Despite having access to the full suite of Adobe apps I still only use Photoshop CS6. I was literally considering uninstalling it just yesterday. Think I'll hang on for a bit...
  9. Hi and welcome to the GreenSock forums, Thanks for telling us about your project. Do you have a GreenSock API question that you need help with? We can provide the best help if you make a little demo with as little code and assets possible to replicate the issue you are facing.
  10. Sorry, I have no idea what that code is supposed to do. I don't see globalTimeline defined nor do I know what stage.children is or what child.timeline.setPaused = true is. That looks more like CreateJS code and not GreenSock code. We really have to stay focused on the GSAP API. I would suggest you set up a VERY basic demo of a page that loads an iframe with a single variable or object in it. Try accessing that variable from the parent. If you get that to work, re-assign that variable to your timeline. Unfortunately If you can't target a single variable in an iframe then there is no point in dealing with the complexity of the second part (timelines, parents, stages, loops, etc). I haven't dealt with iframes much and there are quite a few security measures that browsers impose. I think you will do best on stackoverflow or somewhere else that deals with more general webdev issues.
  11. yup. in Animate 19 Advanced Layers is a feature with turns layers into movie clips. So if Advanced Layers is turned on, everything in a layer is wrapped in another Movie Clip. This is cool because it allows you to add filters and color effects to everything in an entire layer... but uncool because it breaks your code
  12. Hi and welcome to the forums. Thanks for the demo. Great animation! Really love the style. Very strange. First I'm hearing about something like this. I verified that you are correct, I have a solution but not sure of the reason. It seems if you instantly advance the playhead to the end before playing that it will work fine (using progress(1).progress(0) var master = new TimelineMax(); master.add( thisIs() ); master.add( noData() ); master.add( noTaxes() ); master.add( noContract() ); master.add( noEquipment() ); master.add( uploadsAs() ); master.add( instantActivation() ); master.add( tvShows() ); master.add( videos() ); master.add( internetOn() ).progress(1).progress(0); What this does is force every tween to record its start and end values. Please see the demo below. I'm not sure why exactly this is necessary in this case, but I'm sure @GreenSock will be able to shed more light on it. Hopefully my solution works for you.
  13. Carl

    Tween Override?

    From my loose understanding of the question I thought you could call a function at the end of the timeline that would trigger an individual tween outside the timeline that would reveal the button. once it's revealed, nothing in the timeline would affect it. But as mentioned before, even the simplest of demos goes a long way in helping us understand what you need. glad you found a solution.
  14. Hi and welcome to the GreenSock forums, If your banner and parent document are loaded from the same domain, then I believe yes. Your globalTimeline var will also have to be attached to window (be globally accessible). This stackoverflow post illustrates how to target a variable in an iframe from parent: https://stackoverflow.com/questions/8296141/how-to-access-iframes-javascript-objects-from-parent-page
  15. Hi PapaDeBeau, I'm a bit confused by why in 2019 are you posting in a thread from 2017 about whether or not a thread from 2012 has been updated. If you have a question about GSAP please let us know. If it's not directly related to this thread, please post a new topic. Thanks!
  16. Hi, Nice work on the demo. I don't know exactly how Chris finds the velocity and applies it but I suspect it's in here as it appears he is using the distance between 2 things to generate a value: modifiers:{ x: (x, target) => { liquidFollowerY += (this.bottle._gsTransform.x - this.liquidFollower.x) * 0.8; liquidFollowerY *= 0.7; return this.follower.x + liquidFollowerY; } } The official way to track velocity with GSAP is with.... VelocityTracker which is a bonus utility for Club GreenSock members (Shockingly and higher) https://greensock.com/docs/Utilities/VelocityTracker
  17. Dipscom is on the right path. The issue in fact is related to both tweens trying to change opacity at the same time. The second tween starts changing the alpha before the first tween ends. GSAP does not yet merge competing tweens (referred to as additive animation), it kills one of them. If you think about it, it isn't very efficient for the engine to try to set 2 values on the same property at the same time, so the engine intelligently kills the pre-existing tween. In your case the first tween gets killed by the second tween which means it will not run or render when your timeline repeats. It's dead. You can change this behavior by setting an overwrite mode. In your case the easiest solution would be to set overwrite:"none" on your second tween (as shown below) or schedule it to run at a time that does not conflict with the first tween.
  18. Carl

    Null target

    Hi and welcome to the GreenSock forums, It looks like you aren't providing a valid target to this tween: tl3.to(spin(b3Text), 1, { repeat: -1, repeatDelay: 0.5 }); spin() is a function that creates a bunch of TweenMax tweens. You can't tween a function. I think you probably want your spin() function to return a timeline that you then add() to tl3. Please see this article for a detailed explanation of how that would work: https://css-tricks.com/writing-smarter-animation-code/ In the future, please consider providing a reduced test case as explained below. It makes it much easier to offer assistance.
  19. Although Shaun already illustrated it perfectly, I just want to add that timelines and tweens can be passed into functions and also returned from functions. At their core a GSAP animation is just a javascript object. Check out this article for more fancy (and practical) ways to make use of this: https://css-tricks.com/writing-smarter-animation-code/
  20. that's a good find. using that information my code can be simplified if we specify the target param modifiers : { x : function(x){ return x%500; }, opacity : function(x, target){ return target._gsTransform.x / 500 } also worth noting, in your example you are specifying "div" as the target of your tween so this.target is a nodelist (like an array) this.target[0] is the first div
  21. Start with this and modify as you see fit
  22. Carl

    Follow by mouse

    i believe @OSUblake meant to set the circle's position to fixed, not the entire page. Seems to work fine You still have to move the mouse after scroll because your moveCircle function only gets called when the mouse moves.
  23. in addition to the other great advice you could: 1 - Build your entire timeline without the photo animation and then add it LAST at the time you want. var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".button", 1.0, {opacity:1.0}) .to(".apple", 1.0, {opacity:1.0}) .to(".orange", 1.0, {opacity:1.0}) // when all tweens are added then add the photo .to(".photo", 12.0, {scale:1.2}, 1) 2 - create a master timeline with some tweens and the photo tween and then nest another timeline with all the other stuff in it anywhere you want in the master timeline. var otherTimeline = new TimelineLite(); otherTimeline.to(".otherThing1", 1, {x:100}) otherTimeline.to(".otherThing2", 1, {y:100}) otherTimeline.to(".otherThing3", 1, {x:100}) otherTimeline.to(".otherThing4", 1, {y:100}) var tl = new TimelineMax({}); tl.to(".orange", 1.0, {y:200}) .to(".photo", 12.0, {scale:1.2}) .add(otherTimeline, 1)
  24. thanks for the additional info and link. That version pre-dates my involvement around here by a few years. I suspect @GreenSock can offer some better help.