Leaderboard

Will absolutely do it! And I see you meant "truly" one line! I thought you meant one chained event I included a yoyo only because I caught a glimpse of it in your original code. With or without, you certainly answered your own question! Nicely done! Here is a pen using your method

Hi @Faaiz, For fun of the joy ... And if it should be called by buttons: Happy tweening ... Mikel

You're just missing the GSAP plugin from ScollMagic that allows it to hijack the tweens. Add this to your project and you'll be good to go. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> Happy tweening.

Hi @Jimmi Heiserman There are many ways to skin a cat! Using a single, chained statement ... you could execute delays by either using the position parameter, the delay property, or by tweening to an already set value for the duration = to the desired delay. Here is a CodePen illustrating. Hope it helps!

If you still need a unique timeline for each slide, here's a fork of the example I posted earlier in the thread. You can see that I created an array of timelines and manually created one for each article. That is then added on to the end of the animation timeline created each time you click a tab. I also modified the tab indicator a bit to make it into a popper instead of a bubble slider. This one gets a bit bigger so it will look best on CodePen in full page mode. https://codepen.io/PointC/pen/VEaYjb Hopefully that gives you some ideas. Happy tweening.

@Carl @Jonathan Thanks for the info guys. We actually managed to fix it by storing each split.chars in an array and looping through it with the index! A little trick @PointC showed me a few weeks ago. I'm now going to do the same with timelines & see how much I can learn. Really appreciate the examples Carl, we'll be studying these. Cheers!

I can't fork this pen from @OSUblake but I found how to snap the draggable, so here is my trick : var $overflow = $("#overflow"); var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; var progress = 0; var size = 500; //initially colorize each box and position in a row TweenMax.set(".box", { backgroundColor:function(i) { return colors[i % colors.length]; }, x: function(i) { return i * 50; } }); var animation = TweenMax.to(".box", size, { // size = time ease: Linear.easeNone, paused: true, x: "+=500", //move each box 500px to right modifiers: { x: function(x) { return x % 500; //force x value to be between 0 and 500 using modulus } }, repeat: -1 }); Draggable.create('#proxy', { type: "x", trigger: document.documentElement, throwProps: true, onDrag: updateProgress, onThrowUpdate: updateProgress, onThrowComplete:updateProgress, snap: {x: function(value) { return Math.round(value / 50) * 50; }} }); function updateProgress() { animation.seek(this.x); }

I found out!! Not sure how to fully solve it yet to use all updated packages. Looking through my last project, which I've had used the scrambleTextPlugin successfully I was using the Babel core interpreter at version 6x. In this new project, I've used Babel 7x, which changes the way the plugins are loaded. Nevertheless, I was using the same plugins as the old working project, but importing in a new way. * WORKING CONFIG: "babel-core": "^6.26.3", "babel-eslint": "^8.2.6", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-runtime": "^6.26.0", "babelify": "^8.0.0", "browserify": "^16.2.2", "gsap": "^2.0.2", "gulp": "^4.0.0", "gulp-babel": "^7.0.1", "gulp-browserify": "^0.5.1", "gulp-cache": "^1.0.2", "gulp-cond": "^1.0.0", "gulp-envify": "^1.0.0", "gulp-eslint": "^4.0.2", "gulp-image-resize": "^0.13.0", "gulp-imagemin": "^4.1.0", "gulp-jsdoc3": "^2.0.0", "gulp-plumber": "^1.2.0", "gulp-postcss": "^7.0.1", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.1", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.1", "gulp-watch": "^5.0.1", * NOT WORKING CONFIG: "@babel/core": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "babel-eslint": "^9.0.0", "babel-plugin-dynamic-import-node": "^2.1.0", "babel-plugin-transform-es2015-spread": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-runtime": "^6.26.0", "babelify": "^10.0.0", "browserify": "^16.2.2", "gsap": "^2.0.2", "gulp": "^4.0.0", "gulp-babel": "^8.0.0", "gulp-browserify": "^0.5.1", "gulp-cache": "^1.0.2", "gulp-cond": "^1.0.0", "gulp-envify": "^1.0.0", "gulp-eslint": "^5.0.0", "gulp-image-resize": "^0.13.0", "gulp-imagemin": "^4.1.0", "gulp-jsdoc3": "^2.0.0", "gulp-plumber": "^1.2.0", "gulp-postcss": "^8.0.0", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.1", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^3.0.1", "gulp-watch": "^5.0.1", Hope it can help someone. I will keep trying to make it work with the newer version of Babel and update the post if successful UPDATE: Got it! Found a config which worked well, meaning that I'm using latest Babel lib and plugins along with Greensock within my Bundler strategy. # Package.json "@babel/core": "^7.1.2", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/plugin-transform-runtime": "^7.1.0", "@babel/plugin-transform-spread": "^7.0.0", "babel-eslint": "^9.0.0", "babel-plugin-dynamic-import-node": "^2.1.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babelify": "^10.0.0", "browserify": "^16.2.2", # .babelrc { "presets": ["env"], "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@babel/plugin-transform-runtime", "dynamic-import-node"] } # gulp file (added the es2015 preset) browserify({ "entries": modulePath + "/js/main.js", "noParse": ["vue.js"], "plugin": argv.w || argv.watch ? [watchify] : [], "cache": {}, "packageCache": {}, "debug": !isProd }).transform("envify", { "global": true, "NODE_ENV": process.env.NODE_ENV, "transform": [["babelify", { "presets": ["es2015"] }]] }) Thanks for the support people, very glad it is working now

Awesome demos, Craig. So silky smooth

Thanks for showing the other way to do it too with pseudo delays and using a non-change animation as a wait timer. I cleaned up your codepen.io in a fork. I figured since we aren't actually tweening anything for those last 2 seconds, I made both the target and the vars an empty object. That's just preference though. But I did consider the yoyo:true you added to be a bug because not only do we not need it, it causes a flicker/overwrite around the second or third repeat because we don't really want to bounce backwards because we used two "to"s. But again, thanks for that codepen. Seeing how others do something expands our knowledge on this. Tweening is like a chess game, with some many ways to win, and you get better by seeing others moves and strategy you may have missed.

I think I may have answered my own question. new TimelineMax().set(object, {autoAlpha:0}).to(object, 1, {autoAlpha:1}).to(object, 3, {autoAlpha:0, delay:2}).repeatDelay(4).repeat(-1); This appears to work in my example, hitting all those durations and delays of 1, 2, 3, and 4. Do others agree this is correct or can I fix it or optimize it further with just fromTo or something?

Ah awesome thank you! I'm working through understanding all of it & then i'll see what I can do. Cheers, Smallio

nice work, mikel! Solves the problem with very little code. The design is cool too!

I did like that :

That's pretty weird indeed, @jungleD. It sounds like maybe a bug in your bundling process (perhaps the minification?). There's no _typeof() function in any of GSAP. It's particularly vexing because you said that running the scripts directly (not in your bundle) works great. I guess that points again to some odd issue in your bundling. Are you enabling tree shaking maybe? Can you disable it? Is there any way you could switch to using the ES6 modules and see if that gets along better with your setup? [scratching head] Sounds very frustrating. Sorry about the hassle. I wish I had a great answer for you, but I've never heard of this and it's extremely difficult to troubleshoot blind

Just to follow up with this.. Its now all working reliably, thanks for your help! This was mainly achieved by changing the exit animations from a staggerFrom() to a staggerTo(). I also replaced the jquery fadeIn and Out i was using with a xfade function using GASP. For completeness, here's pen with the kind of things i did: Many thanks!!

I notice two problems: 1) You've specifically coded it not to work when the field is empty: if (x != null && x.length > 0 && x.length <= 9) { So you should get rid of that condition or rework it somehow (I'm not sure exactly what you're trying to do). 2) oninput seems to fire before the new value is registered in the input, so maybe try changing it to: onkeydown="setTimeout(inputVal, 1)" We really try to keep these forums focused on GSAP-specific problems. General questions like this are probably better suited to a place like Stack Overflow. Happy tweening!

I'm not really sure what should be happening here, but you're creating your timeline every time you click the section 1 button. This is causing overwrites and everything will look funky. I think you meant to make the master a global variable and restart it on click. Please make these changes to the end of your code. $('#btn1').click(function(){ $('#c2').css('display','none'); $('#c1').css('display','block'); master.restart(); }); we3dxAnimation(); Happy tweening.

Oh, that is some tight artwork. Not quite what I was picturing, but you can still use a loop to create a bunch of circles in a mask. I just eyeballed this so you'll probably need to make some adjustments, but here's a fork of your pen that should get you started. Does that help? Happy tweening.

Sure, here's a basic version before I added the stretchy stuff and color selector. Just a basic bubble tab slider. https://codepen.io/PointC/pen/zJVmMd If I understand what you're asking, yeah, you could have different timelines for each tab. I'd need to see a bit more of what you're doing before I can offer the best advice. Maybe you can fork my basic slider and start modifying it to your needs and we'll go from there. Happy tweening.

We had same question, check the following thread.

Hello I'm back! I am almost 2 years here on contributing to forum. I really love to help other users out there on using GreenSock Animation Platform. I shifted to WordPress a months ago. I would like to apply my knowledge in GSAP to WordPress to make awesome stunning websites. Alright!

The Stackoverflow effect! I think most people have this fear, but as you've seen, this forum is totally different. And when it comes to programming, I don't think there are any dumb questions.