kc@polygonrausch.de

Hi Rodrigo, thanks for you advice. I already looked at this. Maybe i could implement parts of it with ref. The example i used is very simple. but my application actually loads dynamic components and not all animations are directly controlled in the component itself but also from parent once. I will sure take a look if i could refactor by using refs. But the "workaround" works quit nice with the mixin for now. Stay healthy best Carsten

ok i solved this now as proposed. - all my components share a mixin. - i added an identifier vor each component on created. - added a new data attribute that stores this - use this data attribute to the access the unique identifier fo the html element. <div id="d41d8cd98f00b204e9800998ecf8427e"> <div class=" title"></div> </div> <div id="bff149a0b87f5b0e00d9dd364e9ddaa0"> <div class="title"></div> </div> <div id="b38343e9063a888e99db25cc41146c6d"> <div class="title"></div> </div> props: { componentId: { type: Number } } data(){ return { identifier: '' } } computed:{ getIdentifier(){ return "#" + componentId } } created(){ this.identifier = this.getIdentifier; } var timelineInComponent1 = new Timeline() timeline1.to(`${this.identifier} .title`, {x:100}) var timelineInComponent2 = new Timeline() timeline1.to(`${this.identifier} .title`, {x:100}) var timelineInComponent4 = new Timeline() timeline1.to(`${this.identifier} .title`, {x:100})

Hi, i have a general problem with gsap in vue, of course this would also happend in plain javascript, but i just wanted to make sure if there is maybe a workaround. i have components in vue that contain gsap timline animations. when i do add e.g 3 times the same component to the stage, and the timeline animates the "class" named divs, it of course will not just animate the timeline the one component the timeline was called in but of course all 3 of them, since the classnames inside the components are the same. A workaround would be to add a unique component prefix to the classes or a "scoped" attribute like there is for the css part in a component, which then generates a unigue css identifier, so for a timline animation this this would mean, that a scoped timeline in the component only animates also the divs in the component in which it was called. is there something build into gsap already, or do i need to really prefix all timeline div animations with a unique prefix before the class names manually ? Abstract Example what the outcome is: HTML <div id="component1"> <div class="title"></div> </div> <div id="component2"> <div class="title"></div> </div> <div id="component3"> <div class="title"></div> </div> JS var timelineInComponent1 = new Timeline() timeline1.to("title", {x:100}) var timelineInComponent2 = new Timeline() timeline1.to("title", {x:100}) var timelineInComponent4 = new Timeline() timeline1.to("title", {x:100}) each timeline is called in the component on render. What it would cool to be <div id="component1"> <div class="d41d8cd98f00b204e9800998ecf8427e title"></div> </div> <div id="component2"> <div class="bff149a0b87f5b0e00d9dd364e9ddaa0 title"></div> </div> <div id="component3"> <div class="b38343e9063a888e99db25cc41146c6d title"></div> </div> var timelineInComponent1 = new Timeline() timeline1.to("d41d8cd98f00b204e9800998ecf8427e title", {x:100}) var timelineInComponent2 = new Timeline() timeline1.to("bff149a0b87f5b0e00d9dd364e9ddaa0 title", {x:100}) var timelineInComponent4 = new Timeline() timeline1.to("b38343e9063a888e99db25cc41146c6d title", {x:100}) Hope its kind of clear what i mean Thank for you replies.

HI PointC, great. Thank you for those links. Cheers

Hi Jack, no questions, Thanks for your great help. Scroll magic i also tried out already. Nice tool. Maybe now that i know the different approaches i will retry scrollmagic again. Cheers

Hi Jack, thank you for you answer, this sure helps. So thats what i did know..adding a "fake" animation at the 10 second to span up the timeline an the placing the other timeline and tweens where i need them. i'm using the progress to "scrolL" through with the mouse as the scroll position moves on. Unfortanatly what i came about knwo is that its mor like a seek, you can go forward and backwards, i know have to finde a way instead of scrolling throug the "sub" timelines, to play them, an ignore the scrolling for that period But Greensock is such a great tool, so there will sure be a solution for this. Thanks again

Thinking out loud. Of course i could make the timline have like a total of 10 Seconds. and then place the animations accordingly. But maybe there is another direct was ?

Hi, Intro: I'm currently producing a sitebar banner, wich will animate depending on scroll position (percentage) of the website. So the Banner should trigger animation depending on this percentage or scroll position. So the idea was having a timeline fro, 0 to 1 (0 - 100%) Adding tweens there, and when the scroll position reaches theses position trigger these animations. i would like to add tweens to a timeline. But instead of adding them at a certain time, i would like to add them at a certain progress of the timline. var mytween = TweenMax.to(...) e.g. tl.add(mytween, 25%) Is this possible in any way? Thank you Best Carsten