LipstickVoid
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by LipstickVoid
-
-
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!
-
11 hours ago, Gedas said:
@LipstickVoid Yes, current animation scrubber is not ideal. But it pauses on double click and there is a box with exact time as far as I remember.
I had an idea to create most complete and awesome scrubber and integrate it with Bannertime. So feel free to share your ideas and suggestions. Maybe that will motivate me to focus on it more
As for templates you could fork generator-bannertime on GitHub and make your customizations. Here is the path where templates are located: generator-bannertime/generators/app/templates/src/300x250/
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!
-
On 6/8/2017 at 7:18 PM, Jonathan said:
Hello @Squil and Welcome to the GreenSock Forum!
The GSAP SplitTextPlugin is a only available to Club GreenSock members who have Shockingly or Business membership.
Once a member you can find SplitTextPlugin inside your download folder.
You can also play with the SplitTextPlugin in codepen if you like.
See the Pen by search (@search) on CodePen
Please let us know if you have any questions and Happy Tweening
Jumping in on this. Once I got either membership I can use it for whatever project, right? Personal or commercial or at work?
Thanks!
-
Hey! Welcome to the glamorous world of banner dev!
Re. Bannertime, I love it. It removes the issue of preloading/polite loading, and the various clickTag implementations from the equation, and lets you focus on animation. The presentation of the banner centered in the browser is just so it looks nice when being reviewed by clients or art directors; this has nothing to do with how it will look when it's iframed in its placement on a publisher's website. Bannertime's smartObjects are great too, in that they have some built-in functionality, like centering either horizontally, vertically or both; a toggle for setting retina quality, using svgs or embedded bitmaps, etc. Tons of convenience built right in.
Oh - if you ever build ads with Bannertime for one format (eg. DCM) and need to change them later, you can just generate a BT ad for the new format, and copy/paste the contents of banner.loader.js into the existing version, and you're done.
It would be nice if ad platforms provided up to date templates, but I find that I mostly like using my own, or, especially since the new version came out, Bannertime.
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.
-
2
-
-
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.
-
1
-
-
Hello LipstickVoid,
Do you have an example of your code?
Sometimes its better to create a new topic so we can concentrate on just this issue you are having.
Here is an example of animating an image sprite and just animates the background-position property. So your only using one image instead of having to swap out multiple images for better performance.
See the Pen zrGGmQ by jonathan (@jonathan) on CodePen
Please create a limited codepen demo example so we can test your code live
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.
-
Hi LipstickVoid
Are you asking how to do something like that with GSAP or just general advice on getting started?
I think <canvas> would probably be a good choice. I'd recommend searching CodePen for ideas. Here's one I saw a few months ago:
We do keep the support focused on GSAP so if you have any questions related to the animation platform, we'd be happy to help.
Happy tweening.
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.
-
Sounds like you just need to implement the logic using math, that's all. Sorta like (not real code, and this assumes you start out with them all absolutely positioned with their top/left edges aligned):
var tl = new TimelineLite({delay:1}); var gap = 10; //pixels between each var stagger = 0.15; var x = 0; for (var i = 1; i < elements.length; i++) { x += (elements[i-1].offsetWidth + gap) - elements[i].offsetWidth; tl.to(elements[i], 1, {x:x, ease:Power3.easeInOut}, i * stagger); }You could easily tuck that into a function and parameterize it so that you can apply the logic in multiple scenarios.
Sorry for the late reply. Thanks. I will try implementing with your example.
-
Sure, it can be as random as you like.
Here is a demo slightly modified from our docs:
See the Pen xRwwoQ?editors=0010 by GreenSock (@GreenSock) on CodePen
staggerTo() with cycle: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerTo/ Watch the video to see how flexible the cycle feature can be.
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?
-
There are a bunch of ways to approach this. Here's one that uses function-based values:
.staggerTo(".element1, .element2, .element3", 1, {x: function(i) { return "+=" + (i * 30); }, ease:Power3.easeInOut}, 0.15, "frame1+=1");Or use a function that does all the repetitive stuff for you and you just feed in the variables.
Does that help?
Yes, it answers my question. Thank you. What if the end positions are not cookie cutter like it's not increasing by 30 each time but a bit random? How would you approach that?
-
Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position.
I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this?
Thanks in advance!
.to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25") -
Thats good to know so my above solution only works
Sometimes with this bug you can also try adding perspective to the element itself rather than the parent.
.child_with_bg_and_transform_scale { -webkit-backface-visibility: hidden; -webkit-transform: perspective(1000px); }Does that help for OSX Chrome 53?Thanks for checking on your OSX
This will solve the chrome issue but it will make the scaling (to a bigger image) looks blurred in Firefox.
I added your chrome fix and opposite fix for Firefox to the parent and is now working fine on my end in both browsers.
-webkit-backface-visibility: hidden; -webkit-perspective: 1000px; -moz-backface-visibility: visible; -moz-perspective: none;
Oh and if anyone is having the same issue of janky scaling animation in firefox. Put this fix directly to the scaling element
transform-style: preserve-3d; -moz-transform-style: preserve-3d;
What's the proper way to use stand alone animation that is supposed to play throughout the timeline alongside with chained animations?
in Banner Animation
Posted
Yes, it does. Thank you.