lelukas Posted March 29, 2020 Share Posted March 29, 2020 I'm trying to create a transition animation between page changes. The component has to be responsive, so, on resize event I have to recreate my timeline, changing some small parameters. Here's my animation code this.timeline = gsap.timeline({ paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) } }) this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) And when I call the method that plays it, I do this: this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) Before window resize, the animation works just fine. This is the initial style that gsap applies to the elements. When I resize, I do: this.timeline.kill() this.timeline.invalidate() this.timeline.clear() (and Im just overkilling is cause I tried other approaches and they didnt work either. Not that this one is working... That's why I'm here) and then I recreate the from animation (second code block). When I do that, the animation does not shows up anymore. Here's the initial style after resizing so, what am I doing wrong? I'm using Vue, here is the full code of my mixin: import { gsap } from 'gsap' import { CustomEase } from 'gsap/CustomEase' export default { data () { return { screen: undefined, timeline: undefined } }, methods: { toggleMosaic (next) { console.log(this.timeline) this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) }, createMosaicTween (duration, scaleProperty, transformOrigin, stagger) { const ease = CustomEase.create('custom', 'M0,0 C0,0 0.00803,0.16343 0.02359,0.26241 0.03528,0.33672 0.04691,0.38481 0.07146,0.45433 0.09102,0.50976 0.10899,0.54758 0.14127,0.59573 0.17603,0.64758 0.20631,0.68035 0.25235,0.72417 0.29499,0.76476 0.32677,0.79094 0.37697,0.82011 0.43466,0.85363 0.47691,0.86948 0.54247,0.89277 0.64558,0.9294 0.70952,0.95093 0.81445,0.97552 0.88353,0.99171 1,1 1,1 ') if (!this.timeline) { this.timeline = gsap.timeline({ // converteu pra tween paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) this.$root.$emit('transition-dismiss') } }) } else { this.timeline.kill() this.timeline.invalidate() this.timeline.clear() } this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) .set('.mosaic > div', { clear: 'transform' }) } }, watch: { $route () { if (this.timeline) this.timeline.reverse() } } } And here's is where I call the component method: mounted () { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) this.$root.$on('resize', () => { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) }) } Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 Hey lelukas and welcome to the GreenSock forums! Why use a timeline for this? A tween would be fine. I simplified your setup for the demo but here's the basic approach that I'd use: See the Pen MWwLQYJ?editors=0010 by GreenSock (@GreenSock) on CodePen If you have multiple animations and need a timeline the same approach works: See the Pen XWbOZba?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
lelukas Posted April 5, 2020 Author Share Posted April 5, 2020 Yeah, you're right. Im gonna do it using just a tween. Thanks. 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