Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

timdt's Achievements



  1. Yes! Maybe something for in the future Would make things easier. But if i would have done things right the first time i would not have encountered this problem in the first place.
  2. @Shaun Gorneau Thank you for your replie, this makes total sense. I kind off was hoping their would be a alternative. If i use this line of code though: tl.to($img,1,{backgroundImage:'url("")'},"-=2") ( i could have used .set that also works ) the content in the container doesn't get removed. For now i will keep my current layout, but for the next time i will keep this in mind. Learned another thing today Thank you
  3. Hey guys, i ran into a little problem. i have a container div wich contains a background image. Now i want to set the autoalpha of the background to 0, or the opacity. I got it working except for the content inside of the container div. Everything inside of it will be set to autoAlpha 0 and this isnt what i want. I am sorry no codePen because i only need to know what the solution is. <div id="container"> <div> <img class="man" src="assets/man.png" /> <img class="tv" src="assets/tv.png" /> <img class="tafel" src="assets/tafel.png" /> <img class="bitcoin" src="assets/bitcoin.png" /> <img class="light" src="assets/light.png" /> <div id ="circle" class="rondje"> </div> <div id ="circle1" class="rondje"> </div> <div id ="circle2" class="rondje"> </div> </div> </div> js: var $img = $('#container'); tl.to($img,3, {opacity:0}) css: #container { width:600px; height:400px; background-image:url('assets/woonkamer2.jpg'); border:1px solid black; overflow: hidden; }
  4. Btw, sorry for the late response. have been sick for the last couple of days.
  5. @Sahil Will make sure next time everything is allingned properly. Promised. @OSUblake Interesting, didn't know that was possible. Will look into it. seems like a simple straight forward solution. @mikel Thanks! Awesome great looking tool. Getting so much info from all of you guys. Wish i had a bigger brain that would consume all the information at a faster rate so i could do more gsap haha. Is it possible to animate all of this or is it only for making graphs?
  6. @Dipscom Hey thanks for the reply, yeah its just lazyness ( i apologize ). Yeah i get it. the one is relative and the other is absolute. i should give a static width and height with position absolute in the wrapper to both elements and then position them correctly so they both are of the same size and share the same position styling. I dont't know much about the <svg> element so thought the problem was in there somewhere. But now it makes sence. It just new to me with the id's classes and elements that come extra with working with svg. Thanks for the resources don't know how to thank you guys enough. Will pay more attention before asking questions next time. Have a nice evening for now everybody
  7. @mikel Apologies, i have modified the codepen and now it is correct.
  8. Hey guys, I got an animation with position absolute this circle scales from 0 to 1 then the real circle comes behind it and then the fake circle disappears. Problem is the position absolute. Is there a way to fix this? when i zoom in or out or view on a different size screen you see the element jumping to another place Also for some reason i am not fully able to control the tl.set property. for instance when i remove the fade in label with the attached tweens. All of it doesnt work anymore. And i don't understand why.
  9. @mikel Nice this is awesome! Thats really funny, im going to save it and try to recreate this later. Thanks allot
  10. In my expercience the sequencing is really important. (functions,master timeline, labels ) What i find to be missing sometimes are some free in dept tutorials. example: How to create a smiley face and animate the eyes so it looks like he winks. Things that make you go like: "Ohw thats how they do it, or : I wouldnt have thought about that" Just some tips and tricks and really take a long animation appart. There is allot of documentation on this website wich is great. But for people like me showing me would be much more interesting. I would suggest to look at the paid gsap courses out there and create something similar.
  11. Oke, so i have created some new lines angle: 0 degrees. I have included the svg file in the attachments because i dont know what i did wrong. Created this line 4 times over and over again and still does the same thing 0.o Could someone please explain why the other 2 lines work fine except for line 2 which i called "#Lijntje" line1 = #line1 Line3 = #line3 3.svg
  12. @Dipscom that would be awesome
  13. @Sahil yeah maybe set a rotation? and then use it. then it will be pointing into another direction
  14. Ty guys for all of your help thankt to you i am able to create things like this
  15. @Dipscom So you mean group each line in illustrator then export to svg and use the transform translate? or use the scale?