https://pinreel.app/landing/js/interective.js

1"use strict";
2$(document).ready(function () {
3
4
5    var animBadgeContainer = document.getElementById('anim-badge-container');
6
7    let animBadge = bodymovin.loadAnimation({
8        container: animBadgeContainer,
9        renderer: 'svg',
10        loop: true,
11        autoplay: true,
12        path: baseUrl + "/landing/animations/badge.json"
13    });
14
15
16    let animSale = bodymovin.loadAnimation({
17        container: document.getElementById('anim-sale-container'),
18        renderer: 'svg',
19        loop: true,
20        autoplay: true,
21        path: baseUrl + "/landing/animations/sale.json"
22    });
23 
24    let animText = bodymovin.loadAnimation({
25        container: document.getElementById('anim-text-container'),
26        renderer: 'svg',
27        loop: true,
28        autoplay: true,
29        path: baseUrl + "/landing/animations/text.json"
30    });
31
32
33    $(".interective-green").click(function () {
34        $(".badgepath").css("fill", "#28FDC5");
35        $(".interective-white").css("border", "0px solid #000");
36        $(".interective-red").css("border", "0px solid #000");
37        $(".interective-green").css("border", "3px solid #000");
38    });
39
40    $(".interective-red").click(function () {
41        $(".badgepath").css("fill", "#DB6C79");
42        $(".interective-red").css("border", "3px solid #000");
43        $(".interective-white").css("border", "0px solid #000");
44        $(".interective-green").css("border", "0px solid #000");
45    });
46
47    $(".interective-white").click(function () {
48        $(".badgepath").css("fill", "#fff");
49        $(".interective-white").css("border", "3px solid #000");
50        $(".interective-red").css("border", "0px solid #000");
51        $(".interective-green").css("border", "0px solid #000");
52    });
53
54    $(".interective-back2").click(function () {
55        $(".back1").css("visibility", "visible");
56        $(".back2").css("visibility", "hidden");
57        $(".interective-back2").css("border", "3px solid #000");
58        $(".interective-back1").css("border", "0px solid #000");
59    });
60    $(".interective-back1").click(function () {
61        $(".back2").css("visibility", "visible");
62        $(".back1").css("visibility", "hidden");
63        $(".interective-back1").css("border", "3px solid #000");
64        $(".interective-back2").css("border", "0px solid #000");
65    });
66
67    $("#interective-text1").keyup(function(){
68        animText.renderer.elements[8].updateDocumentData({t:this.value, s:62},0);
69      });
70    $("#interective-text2").keyup(function(){
71        animText.renderer.elements[5].updateDocumentData({t:this.value, s:62},0);
72      });
73
74
75});