timdt
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by timdt
-
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.
-
@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
-
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; }
-
Btw, sorry for the late response. have been sick for the last couple of days.
-
@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?
-
@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
-
@mikel Apologies, i have modified the codepen and now it is correct.
-
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.
-
@mikel Nice this is awesome! Thats really funny, im going to save it and try to recreate this later. Thanks allot
-
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.
-
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
-
@Dipscom that would be awesome
-
@Sahil yeah maybe set a rotation? and then use it. then it will be pointing into another direction
-
Ty guys for all of your help thankt to you i am able to create things like this
-
@Dipscom So you mean group each line in illustrator then export to svg and use the transform translate? or use the scale?
-
Yeah, it must look like the line is travelling from dot to dot. and on arrival the dot just pops. Thought maybe i was overlooking something and thought there must be a easier way. But Splitting the line into different paths and then reveal them one by one should also do the trick. Thanks for the help i will post the finished result here when i am done. Maybe will not be today, or may be tomorrow
-
I know it would be possible with the drawsvg plugin but since i dont have that. would it maybe we better to split the lines rotate them and then use scaleX or ScaleY to make the line like it is traveling from one circle to the other?
-
@Sahil Its not about the circles actually. its about the line. Animation should go like this: circle 1 : from scale :0 to normal size. line: Goes from circle 1 tot circle 2 circl2: ( on arrival of line ) from scale :0 to normal size. etc etc etc. hope this maybe clarify's it a little more
-
For some clarification: Sorry didnt translite the id's to english. rood1 = circle2 rood2= circle2 lijn1 = the line i want to animate and reveal the part slowly.
-
@Sahil incredible i am so stupid. I got so frustrated hahha. Well its already getting late. Probably shouldnt code anymore for the rest of the day XD. Thanks anyway for taking the time and pointing out the problem. Makes my headache little les now haha
-
Hey guys, so i am wondering how i can animate my svg? It is only the second time i am doing this only this time it wont work. If i place in the css for instance : opacity:0; this will work. When i use .from opacity or autoAlpha:0 nothing happens. I also used transform origin in the inline style, that also works. What is wrong? Also no console errors in the browser. Would like to animate them so they look like a bar graph Thanks allot in advance
-
Thanks guys! I got it working #boss
-
@Sahil yeah thats true, problem is i am struggeling with this progress slider for a while now so i got kind of frustrated Still got allot and allot to learn but i am making some progress i think. Hope some day i become as skilled as you guys.
-
@Sahil thanks! Great resource have searched for this all day. Will try this!
-
I tried to recreate this slider
