Share Posted May 23, 2018 Hello i have question. How to setTween to many different elements?? var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_1", {top: "-100px"}) // the tween durtion can be omitted and defaults to 1 .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller); Link to comment Share on other sites More sharing options...
Share Posted May 23, 2018 Hi jakub40, This looks like it's related to ScrollMagic, which this forum isn't dedicated to. You'd probably have more luck looking at ScrollMagic's official documentation or asking in its issues page on GitHub. However, from what I can tell, it looks like maybe you shouldn't be chaining .setTween methods immediately after creating the new scene? So you could try something like: var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}); scene.setTween(".layer_8", {top: "100px"}) .setTween(".layer_7", {top: "100px"}) ... 2 Link to comment Share on other sites More sharing options...
Share Posted May 24, 2018 var tl = new TimelineMax() .set(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_1", {top: "-100px"}); // the tween durtion can be omitted and defaults to 1 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(tl) .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller); I believe you can set timelines as well as tweens so something like this should work. I'm not an expert on Scroll Majic but I believe you were confusing the Scroll Majic '.setTween' method which attaches a tween to a Scroll Majic scene with the GSAP '.set' method which sets a property on an object. 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 24, 2018 7 hours ago, Acccent said: Hi jakub40, This looks like it's related to ScrollMagic, which this forum isn't dedicated to. You'd probably have more luck looking at ScrollMagic's official documentation or asking in its issues page on GitHub. However, from what I can tell, it looks like maybe you shouldn't be chaining .setTween methods immediately after creating the new scene? So you could try something like: var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}); scene.setTween(".layer_8", {top: "100px"}) .setTween(".layer_7", {top: "100px"}) ... Unfortunately, it works the same as my solution ;/ Link to comment Share on other sites More sharing options...
Author Share Posted May 24, 2018 4 hours ago, Visual-Q said: var tl = new TimelineMax() .set(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .set(".layer_1", {top: "-100px"}); // the tween durtion can be omitted and defaults to 1 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(tl) .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller); I believe you can set timelines as well as tweens so something like this should work. I'm not an expert on Scroll Majic but I believe you were confusing the Scroll Majic '.setTween' method which attaches a tween to a Scroll Majic scene with the GSAP '.set' method which sets a property on an object. This solution add inline styles to all elements from timeline but dont animate it on scroll from value 0 to value in Timeline hmm Link to comment Share on other sites More sharing options...
Share Posted May 24, 2018 You can add your tweens in a timeline and then pass that timeline to the setTween method. Quote Add a tween to the scene. If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below). If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement. For a scene with a duration of 0, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back. To gain better understanding, check out the Simple Tweening example. Instead of supplying a tween this method can also be used as a shorthand for TweenMax.to() (see example below). http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens. If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite' section on following page, https://greensock.com/get-started-js Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions, http://scrollmagic.io/examples/ 4 Link to comment Share on other sites More sharing options...
Share Posted May 24, 2018 8 hours ago, jakub40 said: This solution add inline styles to all elements from timeline but dont animate it on scroll from value 0 to value in Timeline hmm Sorry that'as what I thought you wanted. As @Sahil noted to animate to these positions you have to use GSAPs animation methods. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now