Hi I’d like to know if we can do something like this. As I’d love to apply this effect into my hero’s sections.
Thank you!
Sure you can build any sort of fun animations with Divhunt.
Use gsap or some others motion libraries.
I have prepared for you a simple gsap animation
Just copy this json and add to the section and style your needs.
{"tags":[{"tags":[],"symbol":null,"order":200,"loop":1,"name":"div","label":"Bounce Circle","css":{"1920":{"self":{"background":"#909090","border-radius":"500px"}}},"text":{},"attributes":{"1":{}},"classes":{"1":[{"name":"ball","css":{"1920":{"self":{"width":"60px","height":"60px","border-radius":"500px"}}}}]},"conditions":{},"properties":{},"Target":null,"target":{"0":{},"length":1}},{"tags":[],"symbol":null,"order":300,"loop":1,"name":"div","label":"Shadow","attributes":{},"classes":{"1":[{"name":"shadow","css":{"1920":{"self":{"width":"60px","height":"30px","filter":"blur(32px)","background":"#636363","position":"relative","bottom":"-80px"}}}}]},"conditions":{},"properties":{},"text":{},"css":{"1920":{"self":{}}},"Target":null},{"tags":[],"symbol":null,"order":100,"loop":1,"name":"embed","label":"Embed","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{"1":" <script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js\"></script>\r\n \r\n <script>\r\nvar ball = document.querySelector('.ball');\r\nvar shadow = document.querySelector('.shadow');\r\n\r\nvar ease = Circ.easeIn;\r\n\r\nvar tl = new TimelineMax({ repeat: -1, yoyo: true });\r\ntl.add('start')\r\n .to(ball, .50, {\r\n y: 100,\r\n ease: ease\r\n })\r\n .to(ball, .10, {\r\n scaleY: 0.6,\r\n transformOrigin: 'center bottom',\r\n borderBottomLeftRadius: '40%',\r\n borderBottomRightRadius: '40%',\r\n ease: ease\r\n }, '-=.05')\r\n .to(shadow, .5, {\r\n width: 90,\r\n opacity: .7,\r\n ease: ease\r\n }, 'start');\r\n\r\n </script>"},"css":{},"Target":null,"target":{"0":{},"length":1}}],"symbol":null,"order":200,"loop":1,"name":"div","label":"Buncing Ball","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{},"css":{"1920":{"self":{"display":"flex","justify-content":"center","align-items":"center","flex-direction":"column","row-gap":"1rem","overflow":"visible"}}},"Target":null,"target":{"0":{"sizzle1714120260800":{"undefined":{"parentNode":[681534,1199,false]}}},"length":1}}
1 Like
Hey @petrbilek Petr thank you!!
One question, how should this JSON looks? I copied and pasted bust isn’t showing any animation 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script>
var ball = document.querySelector('.ball');
var shadow = document.querySelector('.shadow');
var ease = Circ.easeIn;
var tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.add('start')
.to(ball, .50, {
y: 100,
ease: ease
})
.to(ball, .10, {
scaleY: 0.6,
transformOrigin: 'center bottom',
borderBottomLeftRadius: '40%',
borderBottomRightRadius: '40%',
ease: ease
}, '-=.05')
.to(shadow, .5, {
width: 90,
opacity: .7,
ease: ease
}, 'start');
</script>
That’s the same code I have in the embed element. Is not working man.
Thanks for the help anyways. Hoping any Divhunt staff can help me 
Try to install gsap plugin
I did. I even re-installed it.
Hey @iammai
If you want to use the code that @petrbilek provided, then you should add this script to your head-start <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
Then inside of your files
you add the GSAP code as a new JS file "on ready
var ball = document.querySelector('.ball');
var shadow = document.querySelector('.shadow');
var ease = Circ.easeIn;
var tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.add('start')
.to(ball, .50, {
y: 100,
ease: ease
})
.to(ball, .10, {
scaleY: 0.6,
transformOrigin: 'center bottom',
borderBottomLeftRadius: '40%',
borderBottomRightRadius: '40%',
ease: ease
}, '-=.05')
.to(shadow, .5, {
width: 90,
opacity: .7,
ease: ease
}, 'start');