POG

Hi guys, i have a question related to nested timelines with GSAP 3.x I have two separate sets of timelines, which are nested after creation in a single timeline. The problem is that the second has, opacity or autoalpha 0 setting, which only get triggered once the second timeline run in the global one. Normally for that stack and the visual display it's needed that i have to set all the elements on stage to visibility hidden at first. My general question is if it is possible to have an immediate render which takes place too when you nest them together. My actual solution is that i put the second timeline also to the starting point of the first and delayed the animations to a different point, but i'm more interested (for the sake of clean code/logic) if it's possible to have a working immediate render for a nested timeline situation. To set them via css is no option and to put extra markup to hide them first would be possible but it's not the curiosity of my question Thanks for some ideas. Best Peter

Hi, sorry that i get back so late to this and thank you for that detailed information.

Updated it now with the correct fork of your example and setup the baseline as in my example. Hopefully it can be done somehow with GSDevTools activated to have maximal control on creating the animation

Hi Zach, it seems it has to do with GSDevTools ... https://codepen.io/POG78/full/LYGWvKE

Hi all, i have a timeline animation where i add one object with a yoyo animation to the scene. But in the middle of the yoyo i want to overwrite, but the yoyo repeat animation is still going afterwards... I thought i can do it with overwrite, which works, but after the overwrite is finished the previous yoyo continues ... tl_scene_1 is the timeline animation object and female_02 an asset on the stage which is added next to other elements which are moving. tl_scene_1.to(female_02, { duration: 5, y: '-=200', repeat:3, yoyo: true, yoyoEase:true, ease: 'power2.out'}, 14); tl_scene_1.to(female_02, { duration: 1, y: '+=200', repeat: 0, yoyo: false, ease: 'power2.out', overwrite: 'auto' }, 16); I tried also to use killTweensOf to stop it, but than the relation to the timeline is completely removed. So i guessed with a simple overwrite i can keep the whole animation in the timeline, without removing a tweening object, only because i want to stop them. Any ideas, how to solve this. Peter

Hi Mikel, hi Zach, thanks for the reply. @mikel Yes in general i understand your example, but what i do is having a larger animation where multiple dots hovering slowly around and three of them (which are in the stagger object by now) should break out at some time and animate differently and the others can continue during the animation. I'm still in the middle of testing some things ... @ZachSaucier I'm not sure if i understand it correctly. Where would you put that, directly at the property setting? Does it cycle through all instances of the array? Would you set that directly at the value? Is that option documented somehow, would like to know more about it. @mikel With that kind of code (It feels not right) i was able to to check on start the element i want to autoalpha differently. But i have the feeling, theres a better approach, i added roughly an onComplete and killed the the tweening, which allowed me to stop the tweening also from the stagger setting. But i'm really not sure, if that is a good direction. tl_scene_1.to(contact_profile, { duration: 2, autoAlpha: 1, stagger: { each: .2, from: 'random', onStart() { let className = this.targets()[0].getAttribute('class'); if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') { gsap.to(this.targets()[0], { duration: 2, autoAlpha: 1, onComplete() { gsap.killTweensOf(female_02); } }); } } } }, 14); For a better understanding, this is an excerpt of the animation dots. The one with full opacity is the one which i stopped to continue to animate it. The other dots continue to move further ... Thanks, Peter

Hi together, i only wanted to know how it's possible to manipulate/skip a single stagger element, which was already defined on a whole stagger object. The thing is, i have to stagger objects inside a timeline. The stagger runs through around 14 objects, start to make them move and after they're in move the playhead is jumping directly to the fadein. Doing a single stagger which different times and props i'm not aware of. Most of the objects fadein to autoAlpha 1 but 1 one of them should be manipulated further later on and the single asset need to fade only to .25. So my question is how is the best solution to manipulate that property. I'm not sure at the moment how to change/overwrite a prop onStart, or to exclude a single dom object by class name instead of an array not:filter. This is a raw in between code by me, but maybe it gives an idea what i try to figure out. Thx Peter const contact_profile = '.hero-home-introduction__contact-profile'; const female_02 = '.hero-home-introduction__female-02'; let tl_home_introduction = gsap.timeline(); // Scene 1 - Show conversation const tl_scene_1 = gsap.timeline({ id: "Scene 1"}) tl_scene_1.to(contact_profile, { duration: 5, y: '-=20', stagger: { each: .5, from: 'random', delay: -.5, repeat: -1, yoyo: true }, ease: "power1.inOut", delay: .2 }); tl_scene_1.to(contact_profile, { duration: 2, autoAlpha: 1, stagger: { each: .2, from: 'random', onStart() { let className = this.targets()[0].getAttribute('class'); if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') { // Overwrite here // Or } } } },14); // tl_scene_1.to(female_02, { duration: 2, autoAlpha: .25},15); tl_home_introduction.add(tl_scene_1); tl_home_introduction.play(14);

Ah yes, thanks for remembering me.

Hi Craig, interesting, i used it also for debugging options on a more complex animation on our website, which was really helpful to control and adjust the animations. I only expected that tl.restart() or tl.play(0) restart also the animation, even when GSDevTools are hooked as controller into the animation. My problem was only that i run into this issue and thought first that something was wrong with my frontend stack or how i integrated the replay function. As said, when i turn off GSDevTools, also my replay button work as it should be. When this is the normal behaviour i don't care any further to get it to work. I mean i can still bring the timeline to the root of the window and check the last step with my replay button via chromes console and replay the last part from there. Thx Peter

Hi, i have a replay button added which calls myAnimation.play(0) which works fine, when GDevTools isn't created. If GSDevTools is created and the replay button is clicked, all added assets get set to opacity: 0 and visibility: hidden and the play head isn't set to the beginning. Any ideas why this happens? Best Peter

Hi Jack, one question again, is it not possible in any way to define a reference size where to whole area and all its children knows how to calculate? For example you have base size of 1920 x 1078 and on this base size every movie use the percent amount of that object to know how to size up or down in it´s own proportional way and not the bounding box of some object? Maybe you did it already and i don´t know how to use it Regards Peter

Hi Jack, is there a way to remove the listener which calculates the visible area? Hi have a movie which is calculated via that code ls = new LiquidStage(Gaia.api.getPage("index").stage, 1920, 1078, 1024, 510); area = LiquidArea.createAround(contentBox, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.LEFT, AlignMode.TOP, false, 0x00000, 0, 0, 1920, 99999, true, true); you can see the movie here http://netsh10091.web04.net-server.de/d ... /#/service it´s the one with the red border around. The scaling is excact the way i wanted it to be, but when you now click on the button with the 30 degree icon and resize the stage again, the calculation depends on the new visible view and that i wanted to prevent. Is there anyway that you can do a first calculation of the view and than remove the calculation listener, so that everything scales with the first calculated dimensions, because i want so show also the cropped elements but without the calculation outside of the bounding area. Regards Peter

Hi, i dont´t now if i understand the handling of the layout manager right, but i have the following problem. I hope it´s not getting to overcomplicated, because of my english I created a navigation layer which visual borders are 340px width and 1078px height. That navigation is integrated inside a page which is 1920px width and 1078px height. I created a transparent layer inside the navigation which has the same size as the root page, so that the navigation layer scales with the right proportions inside the liquid stage object (also 1920 x 1078). That solution work for me but i don´t know if it´s the best way. Maybe i did something wrong But here is my real problem... I want to get the real x position of a liquid area which is attached inside my scaleable navigation. Because that the real borders of the navigation are 1920px x 1078px instead of 340 x 1078, i created a liquid area on stage which behaves like the navigation with that code -> refNavPage = new LiquidArea(refToMyNavigationLayerFromAbove, 340, 0, 340, 100, 0x313f19); So the scaling is like the exact same way as with my navigation, it starts at 340px inside my PageMc and the alignment is like it should be. Everytime when i try to catch the x position of that movie i get back only 340px, but because of the scaling to a smaller size i wanted to get back the real global position like 260 or something else, to attach another movie of a different level to that scaled x position. I think my problem is to understand how to use your PinPoint Class the right way. I tried it with Adobes Point Class but it also doesn´t work for me. Maybe you have a little hint for me. Regards Peter