[Fade out container background without fading out content in it.]

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. 

[Fade out container background without fading out content in it.]

@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
 

[Fade out container background without fading out content in it.]

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;

      }

[Show/Reveal part of image slowly SVG]

Btw, sorry for the late response. have been sick for the  last couple of days.

[Show/Reveal part of image slowly SVG]

@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?

 

 

 

 

[Positioning absolute element]

@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
 

 

[Positioning absolute element]

@mikel Apologies, i have modified the codepen and now it is correct.

 

See the Pen gXxygK by timdt (@timdt) on CodePen

 

[Positioning absolute element]

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.

See the Pen gXxygK by timdt (@timdt) on CodePen

[Suggestions Needed: Getting Started with GSAP]

@mikel Nice this is awesome! Thats really funny, im going to save it and try to recreate this later. Thanks allot

[Suggestions Needed: Getting Started with GSAP]

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.

 

 

[Show/Reveal part of image slowly SVG]

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

 

See the Pen bYrjXx by timdt (@timdt) on CodePen

 

3.svg

[Show/Reveal part of image slowly SVG]

@Dipscom that would be awesome

[Show/Reveal part of image slowly SVG]

@Sahil yeah maybe set a rotation? and then use it. then it will be pointing into another direction

[Show/Reveal part of image slowly SVG]

See the Pen rYzapj by timdt (@timdt) on CodePen

 

Ty guys for  all of your help thankt to you i am able to create things like this

[Show/Reveal part of image slowly SVG]

@Dipscom So you mean group each line in illustrator then export to svg and use the transform translate? or use the scale?

[Show/Reveal part of image slowly SVG]

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

[Show/Reveal part of image slowly SVG]

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?

[Show/Reveal part of image slowly SVG]

@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

[Show/Reveal part of image slowly SVG]

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.

 

 

See the Pen BmdBxQ by timdt (@timdt) on CodePen

[Animate SVG <g> group]

@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 

[Animate SVG <g> group]

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

See the Pen POjZdY by timdt (@timdt) on CodePen

[Slider function not working]

Thanks guys! I got it working #boss

[Slider function not working]

@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.

[Slider function not working]

@Sahil thanks! Great resource have searched for this all day. Will try this!

[Slider function not working]

See the Pen stLJl by GreenSock (@GreenSock) on CodePen

 

I tried to recreate this slider