LipstickVoid

Yes, it does. Thank you.

I have a group of animation that would be executed one after the other which is perfect to do with timeline and its labels but I also want to add on a single repeating animation that would be playing throughout this whole timeline and would end when the timeline ends. When I added this stand alone animation inside the timeline in the first label, everything else waited for it to finish playing. It still happened even if I put it at the top before the chain animation with labels and without using any labels to calculate the timing. Of course, I can choose not to use labels at all and calculate the time needs to be added in between all the animations manually but that would defeat the purpose of using the timeline in the first place. //want to repeat this sprite throughout the whole timeline timeline.to('.repeating-animation', 1.2, { repeat: 4, //anyway to calculate this automatically so that it stops when the timeline ends instead of giving a fixed value? backgroundPosition: "-10px 0", rotation: 0.01, ease: SteppedEase.config(5) }, "0") //starts at the beginning //followed by chained animation //but everything down below waits for the reapting animation above to be finished before executing .addLabel("label1") .from('.sample', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label1+=0.5") .addLabel("label2") .from('.sample2', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label2+=0.5") .addLabel("label3") .from('.sample3', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label3+=0.5") //and so on I'm wondering - if there is a cleaner proper way to play this repeating animation throughout the timeline. - if there is a way to make the number of times being repeated to be dynamic to total length of the timeline? So, it stops when the timeline ends? Thanks in advance!

It worked perfectly. Thanks! Saved me a lot of headache lol

I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks!

Thanks! I need to play around more with the scrubber to see what can be improved.

@joe_midi I'm currently experimenting with BannerTime. Please help with these two Qs Is there any option available in BannerTime to use a slider so that you can pause and skip to the exact time? I was using jquery slider before and stripped them out when exporting the zipped files. For preview stage client loved that they were able to pause when they wanted to and pinpoint exact timeframes to make modifications. It's very helpful. I can add this in myself but this leads to another q.... If this was something I was to add in myself, is there anyway that I could make my own templates inside BannerTime so next time I generate a new banner with bannertime, my custom add ons are already there? Thanks!

Jumping in on this. Once I got either membership I can use it for whatever project, right? Personal or commercial or at work? Thanks!

Thanks for the reply. It's a wonderful world indeed! Doing banners is quite fun. The issue on my part is I don't get to "find out" how the banner is uploaded and how it's being served as it's handled by another team. They also don't seem to know how the banners should be developed as they specialize in testing them and serving them. All they can do is give you these default templates which aren't always that helpful. There were times I followed the templates down to every detail but they still caused problems. I don't know if this happens to other developers who have done banners or when they started doing banners. I'm unsure about what needs to be done so that the ads are served correctly. This is why I'm scared to tweak with the templates because when something isn't working, I am responsible for it. Now that you've explained such as why being in the middle doesn't affect how the banner is served makes sense to me now but I need someone or some source to answer these questions for me. As I've said I'm all alone in this. I'm still thinking banners in a web development way. Now I feel more confident in using bannertime. I managed to craft a sizmek template of my own and I'm understanding them a bit better. I will look into Bannertime more in the future especially smart objects.

I'm new to banner development and I'm pretty much on my own. Living and learning... I've built quite a lot of DCMs without any issues. My DCM template is pretty solid already but this template I created doesn't work well with other formats and ad platforms. I ran into a lot of issues while doing DCRM and sizmek ads. I've tried BannerTime and I liked it for the most part like being able to choose which platform specific template to use and all but it's using smart objects and stuff which the dumb me doesn't really see the point of using all that while every KB counts. I also noticed that it served the ad right in the middle of the page horizontally and vertically. I also do not see the point of that. Aren't ads supposed to be at the top left corner by default? But I digress. I'm scared if I changed something, it would break something else. I plan to create my own builder in the future once I gain more understanding on the requirements of each ad platform. For now I just want a very minimal builder that can create boilerplates for different ad platforms with gsap so that I don't run into any more issues. That's it. Please help if you know any. Thank you. Oh and does anyone run into issues by using outdated templates? I don't know why ad platforms do not make it easy to get the latest stable templates. So, it would be great if it's a builder that is being updated quite regularly.

Sorry for the late reply. I was rushing through deadlines. I don't even know if I can strip the code down. It's a part of large project and using different plugins which caused a lot of things to conflict with each other. I didn't manage to find a solution for this but luckily, the design was changed and the use of background image through tweenmax was no longer necessary. I followed your advice of using sprite in a new project where I also had to swap images (clients love this lol). It worked very well. Thank you.

I'm having the same issue and changing to background is not working for me.

Thank you and sorry for the late reply. Yes, I was hoping to animate with GSAP but I cannot find good examples for that.

I'm trying to find an example for rays of sun light gleaming from the corner of the screen onto the background image as seen in the image below. I can't seem to find a good example of it. I'm thinking about using several images of rays with transparent backgrounds and tween them to achieve the gleaming effect but to make it look realistic I'm going to need a lot of individual images so I can tween them separately. I'm wondering if it's possible to be done more effectively and easily? Thanks.

Sorry for the late reply. Thanks. I will try implementing with your example.

Sorry. I'll try my best to explain what I have in mind. I didn't mean random as in randomizing it with code but rather if I was animating elements which aren't of the same width or height that placing them evenly cannot be the same value. The spacing between the elements should look even to our eyes but if the element sizes are different we can't keep adding the same value because X is counting from the element's initial position. For example, I want 10px spacing between each element and ALL the elements are initially at X: 0 position. Element A is 20px wide, element B is 30px and element C is 5px. So, I move element A 10px to the right side. Element B should be moved the total of element A width + the width element A moved + spacing width. Element C should move the total of element A width + the width element A moved + element B width + the width element B moved + spacing width. It's like the dealer spreading a deck of cards evenly except that cards' width and height aren't the same. Or am i getting more confusing?