• Content count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About LipstickVoid

  • Rank

Recent Profile Visitors

505 profile views
  1. How to handle tween variables that are relative to window resize

    It worked perfectly. Thanks! Saved me a lot of headache lol
  2. 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!
  3. Thanks! I need to play around more with the scrubber to see what can be improved.
  4. @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!
  5. SplitText problem

    Jumping in on this. Once I got either membership I can use it for whatever project, right? Personal or commercial or at work? Thanks!
  6. 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.
  7. 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.
  8. BackgroundImage doesn't work properly on Safari

    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.
  9. BackgroundImage doesn't work properly on Safari

    I'm having the same issue and changing to background is not working for me.
  10. Rays of sun light gleaming/shining down from above

    Thank you and sorry for the late reply. Yes, I was hoping to animate with GSAP but I cannot find good examples for that.
  11. 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.
  12. Shorter way to animate multiple elements into different end positions?

    Sorry for the late reply. Thanks. I will try implementing with your example.
  13. Shorter way to animate multiple elements into different end positions?

    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?
  14. Shorter way to animate multiple elements into different end positions?

    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?
  15. 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")