jesper.landberg

Hi, Currently if u use Splittext every chars is wrapped in a <div>. Is it possible to wrap each letter in two divs instead? <div><div>L</div></div> ?

Thanks for the great examples both of you, my problem is solved=)

Hi, I'm trying to do a hover animation using GSAP. I could do this example using CSS but I'm going to add more to it later thus wanting to use JS/GSAP. What I want to do: If you just hover the btn quickly and leave immediately I want the enter animation to finish rather then being interupted and then I want the leave animation to fire when the enter animation is done. This works fine if I'm still hovering the btn after the enter animation is complete, but not if i leave the button before. You understand?=)

Hi, is it possible to add a timeline into another timelines staggerFrom? Example: SomeTimelineLite OtherTImelineLite.staggerFrom(SomeTimelineLite) In other words, I want to do a stagger animation that is quite complex and doesnt fit inside staggerFrom(el, duration, {}, staggerDelay })

I'm trying to use the scrollTo plugin but i'm having a weird issue. Using the latest gsap release. TweenMax is clearly there so i don't know why it is throwing this error? Does scollTo require TweenLite? "Browserify Error { [Error: Cannot find module '../TweenLite.js' from '/app/assets/js']" import TweenMax from 'gsap' import scrollTo from './ScrollToPlugin.min' class Arrow { constructor(){ this.arrow = document.querySelector('.js-arrow') this.init() } scrollDown(){ this.arrow.addEventListener('click', () => { TweenMax.to(window, 1.5, { scrollTo: "#story", ease: Expo.easeOut }) }) } init(){ this.scrollDown() } } const arrow = new Arrow()

Hi, How do I in the easiest way repeat/loop part of a timeline? Making two timelines and attaching one to another or? How could this look?

Hi, how do I use the beta?

Hi, I am trying to use scrollToPlugin for the first time but I have a strange(?) issue. It works fine IF the element anchor I'm scrolling to has position: fixed. If else it doesn't work it just jumps there like a normal anchor. Can anyone see what is wrong? (also I'm parting ways with jQuery if you think my JS looks ugly or something:P) Code (part of a Class): import TweenMax from 'gsap' import utils from './config' import domselect from 'dom-select' import scrollTo from './ScrollToPlugin.min' this.topLink.forEach((el) => { const href = el.getAttribute('href') const url = href.replace(/\/+$/, "") const submenu = el.nextElementSibling const links = utils.js.arrayFrom(submenu.querySelectorAll('a')) links.forEach((el) => { if(utils.$url.indexOf(url) > -1){ el.addEventListener('click', (ev) => { const el = ev.target const anchor = el.getAttribute('href') const scrollTo = domselect(`${anchor}`).offsetTop TweenMax.to(window, 1, { scrollTo: { y: scrollTo }, ease: Expo.easeInOut }) }) } else { const anchor = el.getAttribute('href') el.setAttribute('href', `${url}${anchor}`) } }) })

Is it possibly to remove the divs create by splittext after the animation has finished?

EDIT: nevermind, had TweenMax loaded via CDN also, which was the reason for the error.

Thanks for the reply, seems like autoAlpha sovled the problem:)

Hi, I have a problem I have encountered a couple of times. If I have a timeline and some code.. something like this for example: var tl = new TimelineLite({paused:true}}; tl .set(element, { display: "block" }) .from(element, 1, { alpha: 0, ease: Power2.easeInOut }); $('a').click(function(e){ e.preventDefault(); var self = $(this); if(self.hasClass('active')){ self.removeClass('active'); tl.reverse(); } else { self.addClass('active'); tl.play(); } }); Sometimes, randomly, the tl.reverse(); won't reverse display: "block" to it's initial state, why is this and is there any solution?

Hi and thanks for the reply. I am animating a regular html element, so no SVG involved. I know the support isn't the best but it works if I animate it with CSS by toggling a "is-active" class so I thought I would be able to do the same with Tweenmax. I will see if I can fix a simpel codepen=)

Hi, How do I animate clip-path using TweenMax? My code below does not work. var clipFrom = "polygon(52% 0, 77% 0, 39% 100%, 16% 100%)"; var clipTo = "polygon(0 0, 100% 0, 100% 100%, 0 100%)"; TweenMax.fromTo('.some-element', 0.75, { clip: clipFrom }, { clip: clipTo, ease: Power4.easeOut }),

Hi, I just upgraded to club greensock (99$), and just wondering what is included in the usual free TweenMax cdn that I used before? so I know what to include from this "huge" folder=)

var tl = new TimelineLite(), feed = $('.feed'); tl.to(feed, 0.35, { alpha: 0, ease: Power3.easeInOut, onComplete: function(){ feed.empty().html(response); }}); Can anyone tell me why this would fire immediately?

Yeah animating Y instead of height is for sure more smooth. Maby I have to try something else for my transition than height, want to be smooth in all modern browsers. I'l PM the link.

Well, the image i am actually using in development is "only" 300kb 1920x1080px, so I don't know if that is the problem, might be the height. Your solution is nice, but I can't use a white overlay, since I am animating it over another page. I am uploading my stuff to a password protected dev server atm, I can PM u the password and you can see the real stuff. BTW, didn't know u could transform procentual values now (yPercent), is that a new feature? Cleaner than saving the width of an element as a variable when I need to transform full width or height.

Hi again, here comes a somewhat simplified demo, but I still get pretty much the same issue, the animation is very jumpy in Safari, it kind of jumps to the middle and goes from there. See for yourself. http://codepen.io/ReGGae/full/zrNvoN/ (best to watch in full page mode)

Thanks for the answer. Going to try to create a demo recreating the issue.

Hi, I have some questions regarding force3D. I have a pretty animation-heavy site, which runs super smooth in Chrome and Firefox, but very poorly in Safari, and I am looking into all possibilities why this might be. One thing I am thinking about is the way I use force3D. 1. Should I use true or auto? 2. Should i use force3D on ALL alements that have alpha or transforms animated? I currently set force3D: "auto" on all of them. 3. Any good resources on how to use force3D correctly?

Hi, I'm trying to create enter and leave animations with TweenMax and angular 1.4+. I have this code: .animation('.page', [function(){ return { enter: function(element, doneFn){ TweenMax.from(element, 1, { css: { transform: "scale(0.8)", opacity: 0 }, force3D: "auto" }); }, leave: function(element, doneFn){ TweenMax.to(element, 1, { css: { transform: "scale(1.1)", opacity: 0 }, force3D: "auto" }); } }; }]) The animations are working but the thing is the pages get stacked, since I don't tell angular when the animation is done. You are supposed to use "doneFn" for this but I don't know how to implement that in the code. https://docs.angularjs.org/api/ngAnimate

lets say I have this: div{ transition: translate .25s; } div:hover{ transform: translateY(100px); } How would I replicate a simple hover effect with GSAP? Start animation on hover, and reverse it on mouseout, and enable them to be interruptible?. Well yeah exactly how hovers work with CSS.

Hi, I just want to know if there is any difference in using say { x: "50px" } VS { css: { transform: "translateX(50px" }}, performance wise etc? Is x/y/z always better when it comes to positioning? thanks

Cool, thanks a lot!